Box Shadow Generator
Set offset, blur and spread with sliders and copy the box-shadow line.
CSS
Make a CSS Box Shadow Online
Shadows lift cards, buttons and menus off the page. This page opens the CSS Generator on its box shadow tab, so you can tune the shadow on a preview instead of editing numbers and reloading.
Common shadows
| CSS | Use |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | Thin shadow for cards and inputs |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | Soft lifted card |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | Hard offset shadow, flat style |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | Pressed-in field or button |
Performance
Large blurred shadows cost drawing time, most of all when they are animated. To animate a shadow on hover, a common trick is to put the shadow on a pseudo-element and animate its opacity instead of the shadow itself.
Related tools
To round the same element, see the border radius generator; the shadow follows the rounded corners. For a background, see the CSS gradient generator.