CSS Box Shadow Generator

Adjust box-shadow visually with sliders. Multi-layer, inset toggle, live preview, copy CSS in one click.

100% Free No signup Browser-only 5 languages Dark mode

Shadow Layers

Preview

Background Element Radius 12px

CSS

Presets

📖 Where people get stuck

Build a box-shadow with sliders, stack layers, and export the CSS. Everything runs in the browser. The preview is your current browser doing the rendering, so the gradation of the blur can look slightly different on another browser or OS. When pixel-exact agreement matters, check on the real device.

Case	What happens	What to do
Confusing blur with spread	Blur is how soft the edge is; spread scales the shadow itself. Raising spread pushes a still-sharp shadow out beyond the element, which reads as heavier than intended.	A natural shadow usually wants a generous blur and a negative spread. Something like `0 4px 12px -2px rgba(0,0,0,.15)` pulls the shape in slightly before blurring it, so it rises softly from directly under the element.
Animating a shadowed element feels heavy	Transitioning the `box-shadow` value itself means the blur is recomputed on every frame. On something like a hover across a grid of cards, that alone is enough to feel sluggish.	Move the shadow to an `::after` pseudo-element and transition only its `opacity`. Opacity and transform are handled on the compositor, so neither layout nor paint runs. Reach for `will-change` only on elements that actually stutter — it creates layers and costs memory.
The shadow looks pasted on	A single heavy black layer does not match how a real shadow behaves. Real shadows widen and fade with distance from the light and pick up a little of the surrounding colour. One flat layer makes the element look cut out and stuck on.	Stack two or three faint layers. The standard pairing is a small, close, slightly darker one (`0 1px 2px rgba(0,0,0,.10)`) with a large, distant, fainter one (`0 8px 24px rgba(0,0,0,.08)`). Tint away from pure black toward the background hue and it settles in. Both Material Design and the Apple HIG layer shadows this way.

box-shadow only ever casts the shape of the element box, rounded corners included. For a transparent PNG logo or an SVG icon you would get a rectangular shadow, so use filter: drop-shadow() instead — it follows the alpha channel. Note that drop-shadow has no spread and chaining several of them compounds the filter cost, so pick per use case.

❓ Frequently Asked Questions

Where do I paste this?

Inside any CSS selector, e.g. .card { box-shadow: ... }

What is inset?

Draws the shadow inside the element — useful for inset/pressed-button look

Why combine multiple shadows?

Layering a soft close shadow with a longer one creates realistic depth (Material Design and Apple HIG do this)

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.