What's the difference between blur and spread?

Blur softens the shadow edge — the radius over which it fades to transparent. Spread expands or contracts the shadow shape itself before blurring (negative spread pulls it in).

When should I stack multiple layers?

Realistic shadows almost always need two: a tight, dark layer near the element + a wider, fainter layer further out. Compare Material Design or Tailwind's default shadows — they're all multi-layer.

Why use rgba() instead of a HEX color?

Box shadows look more natural with translucent colors that let the background tint through. rgba() lets you set the alpha directly.

Why does Tailwind use underscores?

Tailwind splits class strings by whitespace, so arbitrary values use underscores in place of spaces.

CSS Box Shadow Generator

Stack as many shadow layers as you want, tune offset, blur, spread, color, and inset per layer, and watch the preview update live. Six presets (Soft, Medium, Large, Neumorphism, Inset, Glow) jump-start common designs. Output copies both as a CSS rule and a Tailwind arbitrary-value class.

—

Presets

Shadow layers

X offsetY offsetBlurSpreadColor
Inset
X offsetY offsetBlurSpreadColor
Inset

Preview

CSS

box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);

Tailwind

shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]

How to use

Pick a preset or start from scratch.
Tune each layer's offset, blur, spread, and color.
Toggle inset for inner shadows.
Copy the CSS rule or the Tailwind class.

Frequently asked questions

What's the difference between blur and spread?: Blur softens the shadow edge — the radius over which it fades to transparent. Spread expands or contracts the shadow shape itself before blurring (negative spread pulls it in).
When should I stack multiple layers?: Realistic shadows almost always need two: a tight, dark layer near the element + a wider, fainter layer further out. Compare Material Design or Tailwind's default shadows — they're all multi-layer.
Why use rgba() instead of a HEX color?: Box shadows look more natural with translucent colors that let the background tint through. rgba() lets you set the alpha directly.
Why does Tailwind use underscores?: Tailwind splits class strings by whitespace, so arbitrary values use underscores in place of spaces.

Related tools

CSS Text Shadow Generator (Multi-Layer)

Stack as many text-shadow layers as you want — neon glow, 3D lift, outline, long shadow — live preview plus copy-ready CSS.

Color 0 0

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color 0 0

CSS Filter Playground

Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.

Color 0 0

Color Token Exporter

Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android `colors.xml`. Live preview swatches.

Color 0 0

Color Name Finder

Find the closest CSS, Tailwind, or XKCD-survey color name for any hex/RGB input — ranked by perceptual distance in OKLab color space.

Color 0 0

HSL Color Picker

Drag hue, saturation, lightness, and alpha sliders to dial in a color — copy HEX, RGB, HSL, or a Tailwind arbitrary value.

Color 0 0