Printable Version


CSS3 Linear Gradients
Browser Compatibility Matrix

Gradient Transparency

Simple GradientSpecify DirectionSpecify
Angle
TrasparencyStopsRepeatRepeat Angle
No Prefix
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-o
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-ms
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-moz
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-webkit
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...

Gradient with transparency specified
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-ms-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));