Box-shadow generator

What this box-shadow generator does

Drag four sliders — Offset X, Offset Y, Blur and Spread — type any CSS color, toggle Inset, and watch a sample card update. The result box always shows the full declaration, for example box-shadow: 0px 8px 24px -6px rgba(0, 0, 0, 0.25);, ready to copy. The generator edits a single shadow layer; the recipes below show how to combine several copies into layered, realistic shadows.

How to use it

1. Set Offset X and Offset Y (−50 to 50px). Positive Y moves the shadow down, which reads as light coming from above.
2. Set Blur (0–100px). 0 gives a hard-edged copy of the box; larger values soften it.
3. Set Spread (−50 to 50px). Negative values pull the shadow in so it does not peek out at the top.
4. Edit Color — rgba(), 8-digit hex, hsl() or oklch() with alpha all work.
5. Tick Inset for an inner shadow.
6. Click Copy on the declaration.

Parameter reference

Part	Range in tool	Effect
offset-x	−50 to 50px	Horizontal shift; keep at 0 for a light source straight above
offset-y	−50 to 50px	Vertical shift; 2–12px for cards, larger for floating dialogs
blur	0 to 100px	Gaussian blur size; the shadow fades over roughly this distance
spread	−50 to 50px	Grows or shrinks the shadow before blurring
color	any CSS color	Low-opacity black or a darker tint of the surface color
inset	on / off	Paints inside the box; offsets are mirrored

A useful mental model: the shadow is a copy of the box, moved by the offsets, resized by the spread, then blurred. Because the blur spreads both inward and outward, the visible edge of a 24px blur sits about 12px outside the resized box.

Layered shadow recipes

One shadow rarely looks right. Real objects cast a tight, dark contact shadow plus a wide, faint ambient one. Build each layer in the generator, then comma-join them:

/* Card, resting */
.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 24px -6px rgba(0, 0, 0, 0.18);
}

/* Card, hovered — same layers, lifted */
.card:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 16px 40px -8px rgba(0, 0, 0, 0.24);
}

/* Pressed button */
.btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Focus ring without changing layout */
.input:focus-visible {
  box-shadow: 0 0 0 3px rgba(107, 70, 255, 0.4);
}

/* Floating dialog */
.dialog {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 24px 64px -12px rgba(0, 0, 0, 0.35);
}

The 0 0 0 Npx form (no offset, no blur, positive spread) is a cheap outline that honors border-radius and does not affect layout — handy for focus rings and 1px hairlines.

Gotchas

• Pure black looks fake. #000 at 25% opacity reads as a grey smudge; a shadow tinted with the background hue (for a blue page, rgba(20, 30, 80, 0.25)) looks far more natural.
• Dark mode. Shadows nearly vanish on dark surfaces. Raise the opacity to 0.5–0.7, or signal elevation with a lighter surface color instead of a shadow.
• Shadows and overflow: hidden. A parent with overflow: hidden clips the child’s shadow. Add padding to the parent or move the overflow rule.
• Transforms with shadows. Animating transform: translateY(-2px) on hover while swapping the shadow gives a convincing lift at almost no paint cost; see the hover lift card snippet.
• Inset plus outset together. They can be combined in one list, which is how the neumorphism look is made: a light inset top-left and a dark outset bottom-right.

Related tools and snippets

• Hover lift card snippet — layered resting and hover shadows with a translateY lift.
• Neumorphism card snippet — paired light and dark shadows for the soft-UI effect.
• Glassmorphism card snippet — frosted panel where a faint shadow adds depth over a blurred backdrop.
• Border-radius generator — shadows follow the rounded corners you set here.
• Color converter — get an rgba() version of your surface color to tint the shadow.