CSS box shadow generator
Create natural-looking shadows for cards, buttons and images. Tune layers one by one or generate several smooth layers at once, then copy ready-to-use CSS.
Free · No sign-up · Runs in your browser
Your files are never uploaded; everything runs in your browser.
How to use
- Pick a preset or use the smooth shadow generator.
- Adjust each layer's offset, blur, spread, color and opacity.
- Change the preview box color, corner radius and background.
- Copy the resulting box-shadow code.
Highlights
- Up to 6 layers and inset shadows.
- Smooth, layered shadow generator.
- Live preview on light and dark backgrounds.
- Presets and one-click CSS copy.
Frequently asked questions
How do you write box-shadow?
The syntax is box-shadow: x y blur spread color, e.g. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12). Separate several shadows with commas.
Why do layered shadows look more natural?
In the real world a shadow is dark and sharp close to the object and lighter and softer farther away. Stacking a few light shadows at different distances imitates this.
What is an inset shadow for?
The inset keyword draws the shadow inside the box; it's used for pressed buttons, input fields and recessed looks.
Do shadows affect performance?
Static shadows are fine. Constantly animating many large shadows can cause jank, though; animate opacity or transform instead of the shadow itself.
Need a professional design?
Get in touch for social media design, advertising visuals, posters, logos and brand identity projects.