CSS Box Shadow Generator
Build a box-shadow with a live preview, multiple layered shadows, and a copy-ready CSS declaration.
How this tool works
Adjust the shadow controls
Offset X/Y, blur radius, spread radius, color, and opacity, all with live sliders.
Watch the live preview
A sample box updates in real time as you adjust any control.
Add more shadow layers
Stack additional shadows, each with its own independent set of controls and an inset toggle.
Copy the CSS
The full box-shadow declaration, with all layers comma-separated, ready to paste.
Quick facts
- Category
- Generators
- Best for
- Prototyping card elevation or button depth without round-tripping through browser dev tools
About this tool
Adjust offset-x, offset-y, blur radius, spread radius, color, and opacity with sliders and a color picker while watching a live preview box update in real time, then copy the finished box-shadow declaration. Unlike a single-shadow tool, this one supports stacking multiple shadow layers - add as many as you need and each gets its own independent set of controls, which is how real depth effects are usually built in practice: a soft, large-blur shadow for ambient depth combined with a tighter, sharper shadow closer to the element for definition. An inset toggle per layer switches between an outer drop shadow and an inner shadow pressed into the element, and layers can be removed individually once you have more than one. Pairs naturally with css-gradient-generator when building a complete card or button style, since gradients and shadows are usually tuned together to get a cohesive look. Useful for prototyping card elevation, button depth, or a subtle inset effect without round-tripping through browser dev tools. Runs entirely client-side.
Why use this tool
Multiple layered shadows
Stack ambient and definition shadows together, the way real depth effects are usually built.
Per-layer inset toggle
Mix outer drop shadows and inner pressed-in shadows within the same box-shadow declaration.
Live visual preview
See the exact effect on a sample box before committing to the CSS.
Pairs with the gradient generator
Natural companion to css-gradient-generator when tuning a complete card or button style.
Frequently asked questions
A single shadow tends to look flat or artificial, while real-world depth is usually achieved by layering a soft, larger-blur shadow for ambient light diffusion underneath a tighter, sharper shadow closer to the element - the same technique used in most design systems' elevation scales. This tool lets you build and preview that layered effect directly rather than guessing at values in dev tools.
By default a shadow is drawn outside the element's box, simulating it casting a shadow onto the page - toggling inset flips this to draw the shadow inside the element's border instead, simulating the element being pressed in or recessed. Each shadow layer has its own independent inset toggle, so you can combine an outer shadow with an inset one in the same declaration.
The color picker only handles the RGB hue itself; the separate opacity slider converts that color to an rgba() value with the chosen alpha, since box-shadow color is almost always used at partial opacity to blend naturally with whatever background sits behind the element rather than as a fully solid color.
Explore more free tools
Formatters, converters, validators, and generators - all free and running entirely in your browser.
Browse more tools