CSS Box-Shadow Generator
Design CSS box shadows with sliders and copy production-ready code.
Create perfect CSS box shadows visually
Writing box-shadow by hand means guessing numbers, refreshing the browser, and guessing again. This free online CSS box-shadow generator gives you sliders for every value with a live preview, so you can dial in exactly the shadow you want and copy production-ready CSS.
How to use it
Drag the X and Y offset sliders (−50 to 50 px) to position the shadow, blur (0–100 px) to soften it, and spread (−50 to 50 px) to grow or shrink it. Pick a color and set its opacity from 0 to 1. Tick Inset for inner shadows. The preview updates instantly on the checkered stage, and the code box shows the finished declaration — hit Copy CSS to grab it.
The four presets
- Soft — the classic subtle card shadow (0, 12, 24, 0 at 25% black).
- Hard — a sharp offset shadow with no blur, for brutalist and neo-brutalist designs.
- Glow — a colored outer glow, great for buttons and focus states.
- Inner — an inset shadow for pressed or recessed surfaces.
Shadow tips
Realistic shadows are usually soft, slightly transparent black with a positive Y offset — light comes from above. Layering two shadows (a tight dark one plus a wide faint one) looks more natural than a single heavy shadow, though this tool outputs one declaration at a time. Colored glows work best with brand colors at 40–70% opacity.