CODEWITHSUNDEEP
javascriptcssgradient
rolfo85
rolfo85

Reputation: 767

Fade out a div with a CSS/JS gradient

I don't meant any fade in/out animation. I'd like to know if there is any crazy futuristic CSS property, technics or JS plugin to achieve this effect:

enter image description here

Thanks in advance!

Upvotes: 1

Views: 2444

Answers (2)

SomoKRoceS
SomoKRoceS

Reputation: 3063

Yes, you can set an object with the property:

background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0))

Fourth argument in rgba is the opacity, which will help creating that fading effect while using linear-gradient.

Upvotes: 0

7zark7
7zark7

Reputation: 10145

For the entire content, I think the best option would be to use the mask-image property with a CSS transition:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Upvotes: 2

Related Questions