Box Shadow Generator
Create CSS box shadows with a visual editor. Multi-layer shadows, inset, presets, copy CSS.
About this tool
The CSS box-shadow property draws one or more drop shadows behind or inside an element. This generator supports multi-layer shadows: each layer has its own horizontal offset, vertical offset, blur radius, spread radius, opacity, color, and inset toggle. Stack a tight shadow with a soft one and the browser composites them — the recipe behind most modern card and modal designs.
Example: Material preset stacks three layers — 0 1px 3px rgba(0,0,0,.24), 0 4px 8px rgba(0,0,0,.24), 0 10px 30px -2px rgba(0,0,0,.30) — to produce the Material Design elevation effect. A single-layer Subtle gives a soft lifted-card look; Neon layers two colored glows for a halogen edge.
Click + Add layer to stack another shadow. Layers render in source order (first layer is painted on top). The final CSS is comma-separated and ready to paste.
FAQ
Why would I use multiple layers? ›
A single box-shadow can only produce one soft halo. Realistic depth comes from layering a tight, dark shadow (the contact shadow where the element meets the surface) with a longer, softer one (the ambient shadow cast by diffuse light). The Material and Float presets show this pattern.
What is the difference between blur and spread? ›
Blur softens the shadow edges — a larger blur makes a wider, fainter halo. Spread grows or shrinks the solid shadow shape before blurring: positive spread enlarges it (useful for glows), negative spread shrinks it.
What does "inset" do? ›
Adding the inset keyword paints the shadow on the inside of the element. It is commonly used for pressed-in buttons, sunken inputs, and focus rings. You can mix inset and outset layers in the same shadow.
Why is my shadow barely visible on a dark background? ›
A dark shadow on a dark surface has low contrast. Raise the opacity, switch to a lighter or more saturated color, or try the Neon preset which uses colored shadows that read better on dark themes.
Can I share my shadow setup with a colleague? ›
Yes. Click the <strong>Share link</strong> button next to the layer list — it copies a URL that encodes every layer (offset, blur, spread, opacity, color, inset). Opening that link restores the exact shadow configuration, including multi-layer stacks.
How does this differ from the Neumorphism Generator? ›
The Box Shadow Generator gives you full control over every shadow parameter — offset, blur, spread, color, opacity, inset, and multi-layer stacking — for any CSS element. The <a href="/neumorphism-generator">Neumorphism Generator</a> builds the soft-UI (neumorphic) style where the element and background share the same color, using paired light/dark shadows to create a raised or pressed look. Use this for general-purpose shadows and layered realism; use the Neumorphism Generator when you want the flat-relief neumorphic aesthetic.