CSS Box Shadow Guide

Syntax

The box-shadow property adds shadow effects around an element. Multiple shadows can be comma-separated.

box-shadow: offset-x offset-y blur spread color;

/* Examples */
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

/* Multiple shadows for depth */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

Properties Explained

offset-x / offset-y

Horizontal and vertical displacement. Positive values move right/down.

blur

The blur radius. Larger values create softer shadows.

spread

Expands or shrinks the shadow. Negative values create tighter shadows.

inset

Creates an inner shadow instead of an outer one.

Tips for Better Shadows

Use multiple layered shadows for realistic depth
Match shadow color to the background, not always black
Use negative spread for tight, focused shadows
Consider filter: drop-shadow() for non-rectangular shapes

Design perfect shadows visually with our Box Shadow Generator.

FAQ

box-shadow vs drop-shadow?

box-shadow applies to the box model (including border-radius). drop-shadow follows the actual shape of the element including transparency.

Does box-shadow affect layout?

No. Shadows are purely visual and don't affect element size or layout flow.