CSS3 Shadows Feature

The box-shadow property allows you to easily implement multiple (outer or inner) drop shadows on box elements, including specifying values for color, size, blur, and offset. The text-shadow property simply allows you to drop a shadow on your text, which can be useful for button labels or other text elements you want to stand out. The syntax for both properties is identical.
CSS3 Shadows
the expressive web

Minimum Browser Support:

CSS3 Box Shadows
55.36%
Percentage of users who can view this feature (source: caniuse.com)

Minimum Browser Support:

CSS3 Text Shadows
52.39%
Percentage of users who can view this feature (source: caniuse.com)

Examples

  • tapmates

    Uses text-shadow to provide subtle highlights to text throughout the site.

  • Culinary Culture

    Leverages text-shadow and box-shadow to enhance design of page sections and type.

Feature Detection

  • text-shadow
    • if(Modernizr.boxshadow) {
       //box-shadow is supported
    }
    if(Modernizr.textshadow) {
       //text-shadow is supported
    }

    Learn more about detecting feature support with Modernizr.

    Related Adobe Technologies