CSS Box Shadow Generator
Adjust horizontal and vertical offset, blur radius and opacity to build a CSS box-shadow, and copy the resulting declaration. A live preview shows the effect as you change values.
Free, no signupRuns entirely in your browser
Input
Result
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
About
What the CSS Box Shadow Generator does
The most common mistake is making shadows too strong. Convincing shadows are subtle — a small vertical offset, a generous blur, and an opacity around 0.1 to 0.15. Real light comes from above, so vertical offset should almost always exceed horizontal, and pure black at high opacity reads as a dark smudge rather than a shadow.
How it works
Using the CSS Box Shadow Generator
- 1Set the horizontal offset — usually 0 for a natural look.
- 2Set the vertical offset to push the shadow downward.
- 3Set the blur radius; larger values give a softer, more diffuse edge.
- 4Set the opacity, typically between 0.05 and 0.2.
- 5Copy the generated box-shadow declaration.
Use cases
What people use it for
- Giving cards subtle elevation
- Creating a hover state that lifts a button
- Building a layered elevation scale for a design system
- Adding depth to a modal or dropdown
FAQ
Frequently asked questions
6 related
All tools →