About the CSS Box-Shadow Generator
The box-shadow CSS property accepts up to six comma-separated values per layer and supports stacking multiple shadows on one element, which makes hand-writing a convincing soft, layered shadow tedious and full of trial and error. This generator gives you sliders for offset, blur, spread, and color for as many shadow layers as you want, with the result rendered live so you can see exactly what you're building.
How it works
Each shadow layer has four numeric controls — horizontal offset, vertical offset, blur radius, and spread — plus a color and opacity picker and an inset toggle for inner shadows. Add multiple layers to build the soft, realistic multi-layer shadows used in modern design systems, where a tight, dark shadow near the element is combined with a larger, softer, lighter shadow further out. The preview box updates live, and the CSS output combines all your layers into one valid box-shadow declaration.
Common use cases
- Creating soft, realistic card shadows for a modern UI design
- Building a subtle shadow for buttons that increases on hover
- Designing an inset shadow for pressed or focused input fields
- Layering multiple shadows for the kind of depth used in Material Design cards
- Prototyping shadow values quickly instead of tweaking and refreshing a live site repeatedly
Tips for best results
Real-world shadows are rarely a single hard-edged layer — combine a small, tight, slightly darker shadow with a larger, softer, more transparent one to get the layered depth used in professional design systems. Keep shadow opacity low, generally under 20%, since fully opaque shadows tend to look pasted-on rather than natural. It's also worth remembering that shadows imply a light source, so keeping the vertical offset direction consistent across every shadow on a page (typically light coming from above) makes an entire interface feel physically coherent rather than like a collection of independently lit elements. Once you land on values you like for one component, reuse the exact same shadow across every card, modal, or dropdown in a project rather than tweaking it individually each time, since consistent shadow depth is one of the simplest ways to make an interface feel deliberately designed.
Frequently asked questions
Horizontal and vertical offset move the shadow left/right and up/down relative to the element. Blur radius controls how soft the shadow's edge is — 0 gives a hard edge. Spread expands or contracts the shadow's size independently of the element's own size.
Toggling inset flips the shadow to render inside the element's border instead of outside it, which is commonly used for pressed button states or recessed input fields.
Yes — add as many shadow layers as you want using the add-layer button. All layers are combined into a single comma-separated box-shadow CSS value, exactly as the property supports natively.
A harsh shadow is usually caused by high opacity combined with low blur. Increase the blur radius and lower the color's opacity to around 10-20% for a softer, more natural-looking result.
Yes, box-shadow has been fully supported without vendor prefixes in every modern browser for many years, including on mobile, so the generated CSS is safe to use in production.