Box Shadow Generator
Design a CSS box-shadow visually and copy the code.
About the Box Shadow Generator
The Box Shadow Generator lets you design a CSS box-shadow visually — adjusting offset, blur, spread, colour, opacity and inset — with a live preview and copy-ready code. It turns the fiddly shadow syntax into a few sliders.
Frequently asked questions
Spread grows or shrinks the shadow before the blur is applied. A positive spread makes the shadow larger than the element, while a negative spread pulls it in, which is useful for subtle, tight shadows.
Use a modest offset, a generous blur, no spread, and a low opacity. Hard, dark shadows look artificial; real-world shadows are soft and faint.