CODEWITHSUNDEEP
htmlcss
MultiDev
MultiDev

Reputation: 10649

CSS Creating Opacity Gradient

I am trying to create a class to apply to elements which will give them a gradient using CSS. The problem is that I want a class that contains NO COLOR- only opacity from 1.0 to 0. This way, I can "lay" it down on top of any element with any color and it will give it a gradient, basically starting with the original color and fading to white.

    background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e9e9e9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e9e9e9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e9e9e9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */

How do I do this without specifying any color?

Upvotes: 0

Views: 7496

Answers (1)

Joeytje50
Joeytje50

Reputation: 19112

This is not possible without specifying the colour to transition into. What you could do is use rgba() to define a color and then also its opacity, but only affecting the opacity itself is not possible. An example of a gradient you'd get when using rgba() would be:

background: linear-gradient(to bottom,  rgba(255, 255, 255, 1) 0%, rgba(233, 233, 233, 0) 100%); /* W3C */

that would transition between the two specified colours, going from completely transparent at the #e9e9e9 (which is the same as rgba(233, 233, 233, 1)) to completely opaque at the white. Again, this is an alternative to what you actually want, but transitioning opacity only is not possible.

PS: you can also transition translucent colours in older IE versions using #AARRGGBB format.

Upvotes: 1

Related Questions