Box Shadow Generator

Create CSS box shadows visually

⋮⋮Shadow 1

⋮⋮Shadow 2

Drag to reorder shadows. First shadow renders on top.

Shortcuts: Ctrl/Cmd + Shift + C copy CSS, Ctrl/Cmd + Shift + A add shadow, Ctrl/Cmd + Backspace reset.

Offset X: 0px

Offset Y: 4px

Blur: 6px

Spread: -1px

Opacity: 10%

Shadow

Box

Inset

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

Tailwind CSS

shadow-[0px_4px_6px_-1px_rgba(0,_0,_0,_0.1),_0px_2px_4px_-1px_rgba(0,_0,_0,_0.06)]

Offset X/Y

Shadow position

Blur

Shadow softness

Spread

Shadow size expansion

Inset

Inner shadow