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.