CSS: Box Shadow

Interactive Box Shadow Generator

Syntax

1. box-shadow: xOffset yOffset color
2. box-shadow: xOffset yOffset blur color
3. box-shadow: xOffset yOffset blur spread color
4. box-shadow: inset xOffset yOffset blur spread color
5. box-shadow: ShadowSpec1, ShadowSpec2 …

Simple Box Shadow

Here is a simple box shadow:

Here is the CSS code:

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

Blur

Here are boxes with increasing blur value.

box-shadow:3px 3px blurpx red

Spread

Here are boxes with increasing spread value.

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

Inset Box Shadow

“inset” box shadow makes the shadow go inside the box. All other parameters are the same.

Examples:

Multiple Shadow with Inset

Multiple Box Shadows

#multi18462 {
display:table;
border-radius:9px;
padding:3px;
margin:50px;
box-shadow:
8px 6px 13px 8px red,
-16px 12px 20px 16px yellow,
48px 36px 71px 28px cyan;
}