CSS Box Shadow Generator
Build single or multi-layer CSS box shadows visually, with live preview
#000000box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
About this tool
The CSS Box Shadow Generator builds single or multi-layer box-shadow declarations visually — adjust horizontal/vertical offset, blur radius, spread, color, opacity, and inset per layer, with a live preview showing exactly how it renders. Stack up to six layers to build the soft, multi-layer shadows real design systems use, rather than the flat single shadow a naive box-shadow produces. Each layer's color and opacity are set independently and combined into the final rgba() value automatically, so building something like a soft ambient shadow plus a tighter contact shadow — a common technique for a more realistic, less harsh drop shadow — is just a matter of adding a second layer rather than hand-computing the combined CSS syntax.
When to use it
- →Building a soft, realistic multi-layer shadow instead of a single flat box-shadow
- →Creating a neumorphism-style inset/outset shadow pair
- →Prototyping a card or button's elevation shadow with live visual feedback
- →Getting the exact box-shadow CSS syntax right without memorizing the property's argument order
Tips
- ◆Real-world soft shadows are usually 2-3 layers: a small, sharp shadow close to the element plus a larger, softer, more transparent one further out — try starting with a tight first layer and an oversized, low-opacity second layer.
- ◆Inset shadows render inside the element's border box instead of outside it — combine an inset and a regular shadow on the same element for a pressed or embossed effect.
- ◆Keep total opacity modest (under ~30-40% per layer) for shadows meant to look subtle rather than like a hard drop shadow.
Frequently asked questions
What's the difference between blur and spread?
Blur controls how soft/feathered the shadow's edge is — higher blur means a more gradual fade. Spread expands or contracts the shadow's size uniformly before blurring is applied — a positive spread makes the shadow larger than the element itself, a negative spread makes it smaller. Most everyday shadows use blur alone with spread at 0; spread becomes useful for effects like a glow or an inset highlight.
How do I create a neumorphism-style shadow?
Neumorphism typically uses two shadows on the same element: a light-colored shadow offset up-and-left, and a dark-colored shadow offset down-and-right, both with a soft blur and no spread, on a background close in color to the element itself. Add two layers here with opposite X/Y offsets and contrasting light/dark colors to approximate it.
Why use multiple shadow layers instead of one?
A single box-shadow with a large blur tends to look flat and unrealistic — real-world shadows from ambient and direct light sources overlap at different intensities and spreads. Layering a tight, higher-opacity shadow with a larger, lower-opacity one much more closely approximates how shadows actually look, which is why most modern design systems specify shadows as 2-4 stacked layers rather than one.