CSS Box Shadow

Stack layers. Tune each one. Copy production-grade CSS.

PREVIEW

What is this CSS box-shadow generator?

This free CSS box-shadow generator lets you stack any number of shadow layers visually, tune offset, blur, spread, colour and opacity per layer, then copy production-grade CSS — everything runs in your browser.

How do I create a layered box-shadow in CSS?

Add a layer for each shadow, set offset, blur, spread and colour, then comma-separate them. The generator handles the ordering and rgba conversion, so you can copy CSS that drops straight into your stylesheet.

Key features

Unlimited layered shadows
Stack as many shadow layers as you need; reorder, duplicate or delete each one independently.
Inset and outset
Toggle any layer between drop shadow and inset for inner-glow and pressed effects.
Curated presets
Subtle, soft, medium, hard, neumorphism, glow and glassmorphism — one click to load, then tweak to taste.
Copy as CSS or Tailwind
Grab the canonical box-shadow declaration, or a Tailwind arbitrary-value class for drop-in usage.

How to use it

Start with the default soft shadow, then tweak the offset, blur, spread and colour sliders to taste. Add more layers for richer depth — ambient + key shadow is a classic two-layer pattern. Switch the stage background to verify contrast on dark and light surfaces. Press Copy CSS when you're happy.

Frequently asked questions

How do I stack multiple box-shadows in CSS?

Comma-separate them inside a single box-shadow declaration. The first shadow paints on top of the rest, which matters when you blend a tight ambient shadow with a wider diffuse one.

What is the difference between blur and spread?

Blur softens the edges of the shadow, while spread expands or contracts the shadow itself before blurring. Use blur for ambience and spread for tight rim highlights.

Can I create neumorphism or glassmorphism with this?

Yes. The Neumorphism preset stacks one dark and one light shadow on opposite sides; the Glass preset combines an outer drop shadow with an inset highlight to fake frosted glass.

Built by the Toolbox team against the W3C CSS Backgrounds and Borders Module Level 3 specification — every layer is rendered live in the same shorthand the browser parses, so the preview is exactly what production CSS will paint.