CSS: Box Shadow

By Xah Lee. Date: . Last updated: .

Interactive Box Shadow Generator

offsets x y:
or offset length and direction

blur , spread

Simple Box Shadow

Here's a simple box shadow:

SHADOW!

Here's the CSS code:

div
{
box-shadow: 5px 5px red
}

Syntax

  1. box-shadow: x_offset y_offset color
  2. box-shadow: x_offset y_offset blur color
  3. box-shadow: x_offset y_offset blur spread color
  4. box-shadow: inset x_offset y_offset blur spread color
  5. box-shadow: shadow_spec_1, shadow_spec_2

Blur

Here are boxes with increasing blur value.

box-shadow:3px 3px blurpx red

0
2
4
6
8
10

Spread

Here are boxes with increasing spread value.

box-shadow:5px 5px 0px spreadpx red

-2
0
2
4
6

Inset Box Shadow

“inset” box shadow makes the shadow go inside the box. All other parameters are the same. Here's a example.

box-shadow: inset 3px 3px red;

Inset Shadow Example 2

box-shadow: inset 0px 0px 20px 5px red;

Inset Shadow Example 3

box-shadow: inset 5px 5px 5px 0px grey;

Multiple Shadow with Inset

box-shadow: inset 0px 0px 4px 3px red, 0px 0px 4px 3px blue;

Multiple Box Shadows

multi box lunch




Here's the CSS code:

#multiboxlunch80870 {
display:table;
border-radius:9px;
padding:0.5ex;
margin:5ex;
box-shadow:
8px 6px 13px 8px hsl(1, 100%, 50%),
-16px 12px 20px 16px hsl(60, 100%, 50%),
48px 36px 71px 28px hsl(180, 100%, 50%);
}

Browser Support

Box shadow is supported in all browsers, as of 2012-04-20.

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc