Box Shadow Generator
Design CSS box shadows visually.
#000000box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.25);About Box Shadow Generator
Design CSS box shadows visually and copy the exact code for your stylesheet. Box shadows add depth and elevation to cards, buttons, and modals, but the box-shadow property has several values, horizontal and vertical offset, blur, spread, color, and inset, that are hard to picture from numbers alone. This generator gives you sliders and a live preview so you can dial in the look you want, then copy production-ready CSS in one click. You can even layer multiple shadows for realistic depth. Everything runs in your browser with no signup, so you can experiment freely and paste the result straight into your project.
How to use this tool
- 1Adjust the offset, blur, spread, and color sliders.
- 2Watch the live preview update.
- 3Copy the generated CSS.
Frequently asked questions
What do blur and spread do?
Blur softens the shadow edge; spread grows or shrinks the shadow before blurring. Negative spread makes tighter shadows.
Can I make an inset shadow?
Yes, toggle the inset option to draw the shadow inside the element.