CSS: Box Shadow

Interactive Box Shadow Generator

Syntax

• box-shadow: xOffset yOffset color
• box-shadow: xOffset yOffset blur color
• box-shadow: xOffset yOffset blur spread color
• box-shadow: inset xOffset yOffset blur spread color
• box-shadow: ShadowSpec1, ShadowSpec2 …

Simple Box Shadow

Here is a simple box shadow:

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

#multi-Ghy92 {
 width: fit-content;
 border-radius: 9px;
 padding: 3px;
 margin: 50px;
 box-shadow: 8px 6px 13px 8px red, -16px 12px 20px 16px yellow, 48px 36px 71px 28px cyan;
}