CSS Box Shadow Generator
Compose box-shadow declarations with live preview.
Overview
The CSS Box Shadow Generator composes one or more box-shadow layers — offset X/Y, blur, spread, colour, and inset flag — with a live preview that shows exactly how the shadow renders on a card. Stack multiple shadows for layered depth effects without manually managing comma-separated values.
It is the fast path for designers learning how to create a soft drop shadow in CSS or how to layer multiple box shadows for depth. Reach for it when designing buttons, modal cards, hover states, and the subtle "lifted" effects common in material and neumorphic design systems.
How it works
box-shadow accepts a comma-separated list of shadow layers, each with up to six parts: optional inset keyword, X offset, Y offset, blur radius, spread radius, and colour. The browser paints them in order, with the first layer on top of subsequent layers. Negative spread shrinks the shadow; positive spread grows it before blur is applied.
The generator emits the most compact form (dropping zero spread when unused) and keeps colours in rgba() form so alpha can be tuned without converting back from hex. It also flags shadows wider than 50px that may hurt rendering performance on lower-end devices.
Examples
- A soft drop shadow →
box-shadow: 0 4px 12px rgba(0,0,0,0.15);. - A material-style elevation 2 →
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);. - An inset glow on focus →
box-shadow: inset 0 0 0 2px rgb(59,130,246);. - A neumorphic raised button →
box-shadow: -6px -6px 12px rgba(255,255,255,0.7), 6px 6px 12px rgba(0,0,0,0.15);.
FAQ
What does spread actually do?
Spread grows or shrinks the shadow's silhouette before the blur is applied. A 10px spread makes the shadow 10px larger on every side, so a sharp shadow looks heavier.
Inset shadow vs border?
Inset shadow paints inside the border without adding to layout — perfect for focus rings or pressed-button effects. Borders push surrounding content.
Why are my multiple shadows blurry instead of crisp?
Layered shadows compound their blur; the second layer paints on top of the first, so a small sharp shadow plus a large soft one yields the cinematic depth look most design systems use.
Do shadows affect layout?
No. Shadows paint outside the box but do not occupy layout space, so a shadow can extend beyond the parent's overflow boundary unless the parent uses overflow: hidden.