CSS: Box Shadow Examples

Xah Lee, 2012-04-20

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:

Here's the CSS code:

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

Syntax

Here's the syntax:

• box-shadow: ‹x offset› ‹y offset› ‹color›
• box-shadow: ‹x offset› ‹y offset› ‹blur radius› ‹color›
• box-shadow: ‹x offset› ‹y offset› ‹blur radius› ‹spread radius› ‹color›
• box-shadow: inset ‹x offset› ‹y offset› ‹blur radius› ‹spread radius› ‹color›
• box-shadow: ‹box shadow spec 1›, ‹box shadow spec 2›, …

See example below.

Box Shadow with Blur

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

div {box-shadow:3px 3px ‹blur›px red}

Box Shadow with Spread

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

div {box-shadow:5px 5px 0px ‹spread›px red}

Inset Box Shadow

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

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

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

multiple Shadow with Inset

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

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

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 Color Transparency/Opacity

Browser Support

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

Reference

http://www.w3.org/TR/css3-background/