Menu
WebKit has introduced the ability to create CSS gradients. For example, with the following code:
-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)); However, is it possible to have an opacity gradient using CSS? I want the gradient to be a single color on one side, and fade to zero opacity on the other.
Cross-browser compatibility isn't important; I just need it to work in Google Chrome.
Is there some way to do this using CSS? If not, can something similar be done using JavaScript (not jQuery)?
Thanks for your help.
965
Linear Gradient - Transparency To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point)
Thanks to the new @property defined in the CSS Properties and Values API Level 1 specification we can now have transition with custom properties (aka CSS variables).
linear-gradient() The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image> .
Yes
for the colors, use rgba(x, y, z, o) where o is the opacity
should work
e.g.
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); Edit: For the final value (opacity) 1 is opaque & 0 is transparent
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
