It has been possible to create CSS shadows for some time. But CSS3 makes it part of the standard. There are two types of shadows you can add with CSS3: shadows on boxes and shadows on text.

CSS3 Box Shadows

A box shadow is a shadow behind an element. Since all HTML block elements are boxes, you can apply a shadow to any block-level element. To define a box shadow, you need to set several features:

  • Whether the shadow is inset or not
    An inset shadow starts at the upper-left corner of the box and displays inside the box.
  • The horizontal and vertical lengths
    The lengths define how wide the shadow should extend on the horizontal and vertical sides of the box.
  • The radius of the blurring
    Most shadows are at least slightly blurred, so setting the blur radius indicates how much of the length of the shadow should be blurry rather than solid.
  • The spread of the entire shadow
    The spread covers how much of the shadow should show behind (or inside for inset shadows) the box.
  • The shadow color
    The color of the shadow. You can define this as a Hexadecimal color or as RGBa to add opacity.

The style properties you use to set the box-shadow are:

  • -webkit-box-shadow
  • -moz-box-shadow
  • box-shadow

So, to create a shadow on an element you would write:


-webkit-box-shadow: inset horizontal vertical blur spread color;
-moz-box-shadow: inset horizontal vertical blur spread color;
box-shadow: inset horizontal vertical blur spread color;

If you don’t want the shadow inset, then leave that keyword off. Here is an example of how to set a grey shadow on all your paragraphs:


p {
-webkit-box-shadow: 5px 5px 3px 0px
-moz-box-shadow: 5px 5px 3px 0px
box-shadow: 5px 5px 3px 0px
}

As with all browser-specific styles, you should always place the official CSS3 property last, so that it has the final word on the style. In this instance, that is the box-shadow property.

Box shadows have good support in the current version of all major browsers. In fact, many of the modern browsers don’t require the -webkit- or -moz- prefixes at all.

Internet Explorer 9 does support the box-shadow styles, but IE8 and lower do not. However, as shadows are almost never more than a decorative element, it won’t hurt IE8 if you provide no fallback at all. If you absolutely must support older versions of IE, you can use the instructions in my article Learn How to Build CSS Drop Shadows to create a box shadow in these browsers. But this requires that you also add HTML tags to the page along with the CSS.

CSS3 Text Shadows

You can also apply shadows directly to the text using CSS3. To define a text shadow, you need:

  • The horizontal and vertical length of the shadow
  • The blur radius
  • The shadow color in Hexadecimal or RGBa

To add text shadows with CSS3, you use the text-shadow property:

text-shadow: horizontal vertical blur color;

Here is an example of how to make a grey shadow on all text in a paragraph tag:


p {
text-shadow: 5px 5px 5px
}

Text shadows are supported in all current versions of web browsers except for Internet Explorer 9 and lower. It is expected to be added to Internet Explorer 10.

This lack of support for text shadows in IE can be frustrating, but it is possible to add shadows with a CSS filter dropshadow. To use the filter, you add this line to your CSS:

filter: dropshadow(color=color, offx=horizontal, offy=vertical);

The above paragraph style would be written:


p {
text-shadow: 5px 5px 5px
filter: dropshadow(color=#ccc, offx=5, offy=5);
}

Remember that using CSS filters can slow down your web pages, so be sure that the text shadow is absolutely required before you add it.

Subscribe
%d bloggers like this: