CSS Box Shadow Generator — Copy-Paste box-shadow Code
Shadow layers
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); A visual builder for the CSS box-shadow property. Drag the sliders for offset, blur, and spread, pick a color and opacity, toggle inset, and copy the ready-to-paste declaration. Stack several layers to get the soft, realistic depth that a single shadow can't produce — the preview updates live as you adjust.
How it works
- 1 Shape the shadow Move the X and Y sliders to push the shadow sideways or down, raise Blur to soften the edge, and use Spread to grow or shrink the shadow relative to the box.
- 2 Set color and opacity Click the color swatch to pick a shade and lower the opacity slider — realistic shadows are usually black at 10–30% opacity rather than solid gray. Check inset to draw the shadow inside the box.
- 3 Copy the CSS The box-shadow declaration under the preview updates as you drag. Add more layers if you want extra depth, then hit Copy and paste it into your stylesheet.
Your data stays private
All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.
Frequently asked questions
- What do the four box-shadow values mean?
- In order: horizontal offset, vertical offset, blur radius, and spread radius. So 0px 8px 24px 0px draws a shadow pushed 8px down with a soft 24px blur. Negative offsets move the shadow left or up; negative spread pulls it in tighter than the box.
- What is the difference between blur and spread?
- Blur softens the shadow's edge without changing its size — higher values fade it out over a wider band. Spread changes the size of the shadow itself before the blur is applied: positive values grow it beyond the box, negative values shrink it. A negative spread with a large blur is a common recipe for subtle card shadows.
- What does inset do?
- An inset shadow is drawn inside the element instead of behind it, as if the box were pressed into the page. It's used for input fields, wells, and pressed-button states. Everything else — offset, blur, spread, color — works the same way.
- Why stack multiple shadow layers?
- Real shadows have both a tight dark core and a wide soft falloff, and one box-shadow can't do both. Layering a small low-opacity shadow over a large blurry one is how design systems like Material and Tailwind build their elevation levels. box-shadow accepts any number of comma-separated layers.
- Why use rgba() instead of a solid color?
- A shadow at full opacity looks like a smudge of paint. With rgba() the shadow stays translucent, so whatever is behind the element shows through and the result reads as depth. The generator converts your color and opacity slider into the rgba() value automatically.
- Does box-shadow affect layout or performance?
- Shadows never change layout — the element keeps its size and neighbors don't move. Performance is fine for static shadows; the one thing to avoid is animating box-shadow directly on large elements, since it repaints every frame. Animate opacity on a pseudo-element instead.