Box shadows, the CSS 3 standard way

In this article I am going to explain the CSS 3 standard way of applying a shadow to an object. Using only this technique is probably not going to give the cross browser behavior that you are expecting.

The shadow object

The first thing we need to understand in order to apply shadows to an object is how the shadows are constructed. A shadow object has this prototype:

1
<shadow> = inset? && [ <length>{2,4} && <color>? ]

inset.- If the inset keyword is present the shadow will change from an outer shadow to an inner shadow.

length.- Can take two, three or four values. Here is an explanation of what each length value means, starting from the first value and continuing to the last:

• Horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
• Vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
• Blur radius. Negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
• Spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.

color.- The color of the shadow.

The box-shadow property

The box-shadow property has this prototype:

1
none | <shadow> [ , <shadow> ]*

As we can see from the prototype we can either use the none keywork or we can pass as many shadow objects as we want to apply.

Examples

Here are some examples of how the bow-shadow property looks in some rectangular divs. If you don’t see the shadows it is possible that your browser doesn’t currently support the W3C standard.

1
2
3
.some-class {
    box-shadow: 10px 10px #333;
}

1
2
3
.some-class {
    box-shadow: inset 10px 5px #050;
}

1
2
3
.some-class {
    box-shadow: 5px 5px 2px #004;
}

1
2
3
.some-class {
    box-shadow: 10px -2px 3px 3px #400;
}