CSS: Box Shadow

By Xah Lee. Date: . Last updated: .

This page shows a example of using CSS3 to make box shadows. You can do that with the box-shadow property.

Simple Shadow

Here's a div element with box shadow:

SHADOW!

Here's the CSS code:

div {
width:100px;height:60px;
border:solid thin blue;
box-shadow: 3px 3px red;
}

Syntax

Here's the syntax:

See example below.

Box Shadow with Blur

Following are boxes with increasing blur value (in pixels).

div {box-shadow:3px 3px ‹blur›px red}
0
2
4
6
8
10

Box Shadow with Spread

Following are boxes with increasing spread value (in pixels).

div {box-shadow:5px 5px 0px ‹spread›px 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.

inset shadow

Here's the CSS code:

div {
width:100px;height:60px;
padding:1ex;
border:solid thin blue;
box-shadow: inset 3px 3px red
}

Inset Shadow Example 2

inset shadow
div {width:100px;height:60px;
padding:1ex;
box-shadow: inset 0px 0px 20px 5px red}

multiple Shadow with Inset

in/out shadow + blur + spread
div {
width:100px;height:70px;
padding:1ex;
box-shadow:
inset 0px 0px 4px 3px red,
      0px 0px 4px 3px red;
}

Multiple Box Shadows

Simple Example

multi box lunch




Here's the CSS code:

div {
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%);
}

Complex Example

bleeding rainbow






Here's the CSS code:

div {
display:table;
padding:0.5ex;
margin:5ex;

box-shadow:
 8px  6px  3px  8px hsl(30, 100%, 50%),
16px 12px  6px 16px hsl(60, 100%, 50%),
24px 18px  9px 24px hsl(90, 100%, 50%),
32px 24px 12px 32px hsl(120, 100%, 50%),
40px 30px 15px 40px hsl(150, 100%, 50%),
48px 36px 18px 48px hsl(180, 100%, 50%),
56px 42px 21px 56px hsl(210, 100%, 50%),
64px 48px 24px 64px hsl(240, 100%, 50%),
72px 54px 27px 72px hsl(270, 100%, 50%),
80px 60px 30px 80px hsl(300, 100%, 50%),
88px 66px 33px 88px hsl(330, 100%, 50%),
96px 72px 36px 96px hsl(360, 100%, 50%);
}

You can create more effect when you specify semi-transparent shadow, using “hsla” color spec. See: CSS: Opacity

Browser Support

“box-shadow” is supported in all browsers, as of .

Reference

CSS Backgrounds and Borders Module Level 3

CSS Effects

  1. CSS: Round Corners, border-radius
  2. CSS: Box Shadow
  3. CSS: Text Shadow/Outline
  4. CSS Triangle, CSS Shapes
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image, CSS Sprites Tutorial
  8. CSS: Transition Tutorial
  9. CSS: Animation Tutorial
Like what you read? Buy JavaScript in Depth