Runs locally
Box Shadow Generator
Tune a shadow and copy the declaration.
box-shadow: 8px 12px 24px 0px #00000055;
Export and import are available after you sign in. Sign in
Offset, blur, spread, color and inset update the live sample.
About this tool
Give cards, buttons and modals a soft drop shadow. The sample shows the shadow on a real element, and one click copies the box-shadow declaration.
How to use it
- 01
Look at the shadow on the sample card.
- 02
Copy the box-shadow CSS.
- 03
Paste it into your stylesheet and adjust the values if needed.
FAQ
Frequently asked questions
What do the box-shadow values mean?
Horizontal and vertical offset, blur radius, spread and color, optionally with inset for an inner shadow.
Is box-shadow bad for performance?
Static shadows are cheap. Animating large blurred shadows can be slow; animate opacity of a pseudo-element instead.