Design & CSS

CSS Box Shadow Generator

Build multi-layer shadows visually — slide every layer's offset, blur, spread, and color; pick a preset; then copy CSS, Tailwind, React inline style, SCSS, or JSON — all in your browser.

Live preview

Switch the surface between light, dark, transparent checker, or a custom color — the box updates instantly.

Preview

Width

Height

Radius

Show sample text inside the box

Preset library

Material elevations, Tailwind defaults, neumorphism, Apple-flavored popovers, and decorative shadows.

Material elevation

Tailwind

Neumorphism

iOS & macOS

Decorative

Shadow layers

2 / 8

Stack up to 8 layers. The first layer paints on top, the last paints behind — drag with the arrows.

Offset X

Offset Y

Blur

Spread

Alpha: 10%

Inset

Offset X

Offset Y

Blur

Spread

Alpha: 10%

Inset

Code output

CSS, a Tailwind class (named when possible, otherwise arbitrary-value), React inline style, SCSS, or JSON.

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

Saved shadows

Save the current stack under a name and re-load it any time. Stored in your browser only.

Nothing saved yet — name your shadow above and click Save.