CSS Box Shadow Generator
Craft layered CSS box-shadows with live sliders for offset, blur, spread, color, opacity and inset: preview on a real element and copy ready-to-paste CSS instantly.
box-shadow: -;
Everything updates live in your browser: no uploads, no sign-up, completely free.
About CSS Box Shadow Generator
The CSS Box Shadow Generator lets you design box-shadows visually instead of guessing values in code. Drag sliders for horizontal and vertical offset, blur radius, spread radius, color and opacity, with an inset toggle, and watch a real element update live. When it looks right, copy the ready-to-paste CSS in one click.
Modern UI shadows are rarely a single layer. This generator supports stacked shadow layers: add, duplicate, hide or remove layers, and preview either the selected layer alone or all layers combined. Layering a tight dark shadow under a soft wide one is how polished cards and buttons get their depth.
You can also style the preview element itself (box color, border radius and canvas background), so the shadow is judged against a realistic context, including dark surfaces. Start from a preset, hit “Randomize layer” for inspiration, and reset whenever you want a clean slate. Everything runs in your browser.
How to use CSS Box Shadow Generator
- Adjust the sliders for horizontal offset, vertical offset, blur, spread, color and opacity, and toggle “Inset shadow” if you want an inner shadow.
- Click “Add layer” or “Duplicate layer” to stack shadows, and switch the preview mode between “This layer” and “All layers” to fine-tune each one.
- Tune the element and canvas (box color, border radius and background), so the preview matches your real design.
- Apply a preset or use “Randomize layer” if you want a starting point instead of a blank slider set.
- Copy the full CSS rule (or just the value) and paste it into your stylesheet.