CSS box-shadow Property

The box-shadow property in CSS allows web designers to add shadow effects to box elements, thus giving the element a more three-dimensional look and feel. This property is introduced as part of the CSS3 standard, and is supported by all the major browsers today.

The syntax for box-shadow is as follows:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color

• [inset]: This is an optional field. If inset is specified, this means the shadow would appear inside the box element. Otherwise, the shadow appears outside of the box element.
• offset-x: This is a mandatory field. The value indicates the amount of distance the shadow would extend to the right of the box element. If the number is negative, it means the shadow would extend to the left of the box element.
• offset-y: This is a mandatory field. The value indicates the amount of distance the shadow would extend below the box element. If the number is negative, it means the shadow would extend above the box element.
• blur-radius: This is an optional field. If left unspecified, the default value is 0. A large blur-radius value means that the shadow would be blurry, and a small blur-radius means that the shadow would be sharp. Only non-negative numbers are allowed.
• spread-radius: This is an optional field. If left unspecified, the default value is 0. Both positive and negative numbers are allowed. A positive value expands the shadow, while a negative value shrinks the shadow.
• color: This is an optional field. This is the color code. It can be specified in hexadecimal code, RGB, or color name. If no color is specified, the box shadow will have the same color defined for the box element.

Note that the order of the values is important. For example, offset-x always occurs before offset-y, and blur-radius always occurs before spread-radius.

Example 1

CSS declaration:

#ex1 { border-style:solid; border-width:1px; box-shadow: 5px 5px #999; }

The following HTML,

<p><div id="ex1"> Box-shadow property example 1. </div>

renders,

Notice the box shadow extends to the right of the box element by 5px and below the box element by 5px.

Example 2: Negative offset values

CSS declaration:

#ex2 { border-style:solid; border-width:1px; box-shadow: -10px -10px #999; }

The following HTML,

<p><div id="ex2"> Box-shadow property example 2. </div>

renders,

Notice the box shadow extends to the left of the box element by 10px and above the box element by 10px.

Example 3: Inner Shadow (Inset)

CSS declaration:

#ex3 { border-style:solid; border-width:1px; box-shadow: inset 10px 10px red; }

The following HTML,

<p><div id="ex3"> Box-shadow property example 3. </div>

renders,

Notice the box shadow is inside of the box because of the inset declaration. This is called an inner shadow. It extends 10px to the right from the left border of the box element and extends 10px below the top border of the box element. Also notice the shadow color is now red.

Example 4: Blur radius

CSS declaration:

#ex4 { border-style:solid; border-width:1px; box-shadow: 5px 5px 10px #999; }

The following HTML,

<p><div id="ex4"> Box-shadow property example 4. </div>

renders,

Notice that by setting blur-radius to 10px, now the shadow is blurry and no longer sharp.

Example 5: Spread radius

CSS declaration:

#ex5 { border-style:solid; border-width:1px; box-shadow: 5px 5px 10px 5px #999; }

The following HTML,

<p><div id="ex5"> Box-shadow property example 5. </div>

renders,

Notice that by setting spread-radius to 5px, the shadow extends further than Example 4.

Example 6: Multiple shadows

CSS declaration:

#ex6 { border-style:solid; border-width:1px; box-shadow: 5px 5px #999, -3px -3px pink; }

The following HTML,

<p><div id="ex6"> Box-shadow property example 6. </div>

renders,

Notice the presence of two shadows, one to the upper-left of the box element, and the other to the lower-right of the box element.