CSS3 Gradients Feature

CSS3 color techniques such as RGBA and HSL, HSLA color models, opacity, and linear and radial gradients allow designers more flexibility in how to specify colors and effects in the browser. This can reduce the need to pre-render such effects as bitmaps.
CSS3 Gradients
the expressive web

Minimum Browser Support:

CSS3 Gradients
49.13%
Percentage of users who can view this feature (source: caniuse.com)

Minimum Browser Support:

CSS3 Opacity
55.8%
Percentage of users who can view this feature (source: caniuse.com)

Minimum Browser Support:

CSS3 Colors
55.8%
Percentage of users who can view this feature (source: caniuse.com)

Examples

  • X-Worlds

    Enhances navigation element backgrounds using CSS3 gradients.

  • Button Maker

    Uses CSS3 gradients and RGBA to create a CSS button generator.

Feature Detection

if(Modernizr.cssgradients){
   //CSS Gradients are supported
}
if(Modernizr.rgba){
   //Specifying colors via RGBA is supported
}
if(Modernizr.hsla){
   //Specifying colors via HSLA is supported
}
if(Modernizr.opacity){
   //Opacity is supported
}

Learn more about detecting feature support with Modernizr.

Fallback Strategies

For CSS3 gradients, use images or solid colors for browsers where gradients are not supported.

For RGBA and HSLA, you can use CSS’s built in fallback functionality to specify a default color without alpha, like so:

.content {
   background-color: #0000FF;
   background-color: rgba(0,0,255, .5);
}

For opacity, you can default to a non-transparent value, use a pre-rendered bitmap, or consider using filters in Internet Explorer. You can find a complete discussion on opacity fallback here.

Related Adobe Technologies