Understanding CSS Box Shadow

Master the CSS box-shadow property. Learn about offset, blur, spread, and color to create stunning shadow effects.

box-shadow Syntax

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

The box-shadow property adds shadow effects to elements. It accepts multiple values to control the shadow appearance.

offset-x5px

Horizontal offset (positive = right)

offset-y5px

Vertical offset (positive = down)

blur10px

Blur radius (larger = more blur)

spread0

Spread radius (positive = expand)

colorrgba(0,0,0,0.2)

Shadow color

insetinset

Inner shadow (optional)

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

box-shadow: 0 1px 3px rgba(0,0,0,0.12),
            0 1px 2px rgba(0,0,0,0.24);

box-shadow: 0 10px 20px rgba(0,0,0,0.19),
            0 6px 6px rgba(0,0,0,0.23);

Subtle

Medium

Strong

Dramatic

Visually generate shadow effects