CSS: Box Shadow

By Xah Lee. Date: . Last updated: .

Simple Box Shadow

Here's a simple box shadow:

SHADOW!

Here's the CSS code:

div
{
border:solid thin blue;
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

Simple Example

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 .

CSS Effects

  1. Round Corners
  2. Box Shadow
  3. Text Shadow
  4. 2D Transform
  5. Image Rollover
  6. Background Image
  7. Transition
  8. Animation
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog