Colors & design
Box Shadow Generator
The perfect shadow with sliders, the CSS code in one click.
A well-tuned drop shadow lifts a card off the page, separates a button from its background and gives an interface hierarchy — but writing a box-shadow value by hand is guesswork. Here everything is a slider: horizontal and vertical offset, blur radius, spread, shadow opacity, plus a checkbox to switch to an inner (inset) shadow. The preview — a card on a neutral background — reflects every adjustment live, exactly as your browser will render it. When it looks right, copy the complete CSS declaration in one click and paste it into your stylesheet or design system. Free, no sign-up, and it all runs in your browser.
How does it work?
- Set the horizontal (X) and vertical (Y) offsets.
- Adjust the blur, spread and shadow opacity.
- Toggle "inset" if you want an inner shadow.
- Copy the generated CSS in one click.
Frequently asked questions
How do I get a natural, subtle shadow?
Small vertical offset (2 to 8 px), zero or tiny horizontal offset, generous blur (two to three times the offset), low opacity (8 to 20%). Light comes from above, so the shadow falls downward.
What does the spread parameter do?
It grows (positive value) or shrinks (negative value) the shadow before the blur is applied. Negative spread produces tight, elegant shadows; positive spread with zero blur draws a solid border.
When should I use an inset shadow?
For a recessed look: input fields, pressed buttons, sunken panels. The shadow is drawn inside the element instead of being cast behind it.
Do shadows hurt performance?
A static box-shadow is very well optimized by browsers. Just avoid continuously animating the blur on large surfaces — for transitions, animate the opacity of a shadow-bearing pseudo-element instead.