How many shadow layers can I add?

Up to 5 shadow layers. Multiple shadows are rendered from front to back in the order listed.

What does the Spread value do?

Positive spread expands the shadow beyond the element bounds. Negative spread shrinks it — useful for soft, realistic shadows.

When does the Tailwind class show?

The Tailwind class appears when your shadow closely matches one of the built-in Tailwind shadow presets (shadow-sm through shadow-2xl, shadow-inner).

CSS Box Shadow Generator

Runs in browser

Generate CSS box shadows visually. Multi-layer, live preview, Tailwind output.

Generate CSS box shadows visually with a live preview. Adjust blur, spread, offset, color, and opacity. Add multiple shadow layers. Copy CSS and Tailwind shadow class instantly.

Presets

Shadow

Inset

H-offset0px

V-offset4px

Blur6px

Spread-1px

Color#000000

Opacity10%

Box colorPage color

Radiuspx

CSS

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

Tailwind class

shadow-md

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Choose a preset or start from scratch
Click a preset (sm, md, lg, xl, 2xl, inner) to start with a Tailwind-equivalent shadow, then tweak the sliders.
Adjust shadow layers
Use the sliders for H-offset, V-offset, blur, spread, color, and opacity. Toggle Inset for inner shadows.
Copy CSS or Tailwind
Copy the full box-shadow CSS property or the matching Tailwind class (when it matches a standard preset).

Common use cases

Designing card elevation shadows — Build multi-layer box shadows for cards with precise blur and spread control, then copy the CSS.
Matching Tailwind shadow presets — Visually tune a shadow and get the matching Tailwind class (shadow-md, shadow-lg, etc.) when it aligns with a preset.

Examples

Card shadow (shadow-md)
Standard card elevation shadow.
Output
```
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
```

Frequently asked questions

How many shadow layers can I add?: Up to 5 shadow layers. Multiple shadows are rendered from front to back in the order listed.
What does the Spread value do?: Positive spread expands the shadow beyond the element bounds. Negative spread shrinks it — useful for soft, realistic shadows.
When does the Tailwind class show?: The Tailwind class appears when your shadow closely matches one of the built-in Tailwind shadow presets (shadow-sm through shadow-2xl, shadow-inner).

Key concepts

Box shadow: A CSS property that adds one or more shadow effects around an element's border box, creating depth and elevation.
Spread: The box-shadow spread value — positive values expand the shadow beyond the element, negative values shrink it.

You might find these useful too.

More css tools

CSS Flexbox Generator
Visual CSS Flexbox builder with live preview, CSS and Tailwind output.
Open

Related Guides

→ Css Box Shadow Examples