About the CSS Box Shadow Generator
Realistic shadows usually combine several layers: a tight, darker shadow for contact and a large, soft one for depth. Add up to five layers, tweak each with sliders and copy the combined box-shadow value. The preview updates live as you edit.
How to use it
- Adjust the first layer's offset, blur, spread and opacity.
- Add more layers for depth.
- Copy the CSS.
Good to know
- Large blur radii on many elements can slow down scrolling on low-end devices.
- Use negative spread to keep shadows from extending sideways.