CSS Box Shadow Generator
Design a CSS box-shadow with several layers, each with offset, blur, spread, colour, opacity and inset, with a live preview and copyable CSS.
Free · No sign-up · Your inputs stay in your browser
Input
Generate a CSS box-shadow
Output
CSS
97 characters
Layered shadows read as more natural than one heavy one: a tight, faint shadow for the contact edge and a wide, soft one for elevation. Shadows are painted, not laid out, so they never move other elements; animate opacity of a pseudo-element carrying the shadow rather than the box-shadow itself, which repaints every frame.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
Layers look natural
A single dark shadow looks pasted on. Real objects cast a sharp, faint shadow where they meet the surface and a wide, soft one further out. Two or three layers with low opacity, one tight and one large with negative spread, give depth without a heavy outline. The syntax is in MDN's box-shadow reference.
Performance
Large blurs are painted, not laid out, so they never move other elements, but animating box-shadow repaints every frame. To animate elevation, put the shadow on a pseudo-element and animate its opacity, which the compositor handles.
