Box Shadow Generator
Design Tools
Build CSS box-shadow styles visually. Stack multiple shadow layers, tune offset/blur/spread/color/alpha, and copy production-ready CSS.
Runs entirely in your browserAbout Box Shadow Generator
Box-shadow is one of the most expressive CSS properties — it controls everything from subtle card elevation to dramatic 3D effects. The Shadow Generator lets you tune each component (X/Y offset, blur radius, spread, color, alpha) and stack multiple shadows together for layered, realistic depth.
Professional designs almost always use multi-layer shadows: a tight, dark, close-in shadow plus a soft, large, more transparent ambient shadow approximates how real light scatters and gives interfaces that polished look. With up to 6 stacked layers and per-layer inset support (for inner shadows, used for buttons or pressed states), you can compose anything from Material elevation tokens to floating-card effects. The output is plain CSS, ready to drop into your stylesheet.
How to use
- 1
Pick a layer or add a new one
Click a row in the Shadow layers list to edit it, or use Add layer to stack another (up to 6).
- 2
Adjust offset, blur, spread
X and Y offset move the shadow direction. Blur softens the edge. Spread grows or shrinks the shadow.
- 3
Set color and alpha
Use the color picker (with alpha support) to pick a translucent shadow color. Subtle, mostly-transparent shadows look more realistic than opaque ones.
- 4
Toggle inset for inner shadows
Inset shadows render inside the element instead of outside — useful for pressed buttons or inset panels.
- 5
Copy the CSS
Use the Copy button to grab the full `box-shadow: ...` declaration.
Examples
Subtle card elevation
A single low, soft shadow — Material elevation 2 feel.
Output
box-shadow: 0px 4px 12px 0px #00000020;Layered floating effect
Two layers — tight close shadow plus soft ambient.
Output
box-shadow: 0px 1px 2px 0px #00000010, 0px 12px 30px -8px #00000040;Inset pressed button
Single inset shadow makes the element feel recessed.
Output
box-shadow: inset 0px 2px 4px 0px #00000030;Frequently asked questions
Why use multiple shadow layers?+
Real light produces complex shadows — both a sharp shadow directly below and a soft ambient one. Combining a tight, dark layer with a soft, large, more transparent layer mimics this and looks more realistic than any single shadow.
What's the difference between blur and spread?+
Blur softens the shadow edge. Spread grows or shrinks the shadow's overall size before blurring. Negative spread is common — it makes the shadow smaller than the element, useful for very tight shadows.
When should I use an inset shadow?+
For pressed buttons, recessed panels, or inputs you want to feel depressed. Inset shadows render inside the element border, the opposite of normal box-shadow.
Why does my shadow look too dark?+
Most realistic shadows are mostly transparent (alpha 0.1–0.3). If yours is at full opacity, drop the alpha — the result will look much more natural.
Will this work in all browsers?+
Yes. Box-shadow is supported in every modern browser. Even multi-layer shadows have been universally supported since IE9.
Related tools
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview.
Flexbox Playground
Experiment with Flexbox container and item properties visually.
Border Radius Generator
Create custom rounded corners with per-corner control and squircle presets.
Color Palette Generator
Generate color palettes from a base color using complementary, triad, and other schemes.
CSS Formatter
Format and organize CSS automatically with configurable brace and indent styles.