Guides ·
How to use CSS Box Shadow Generator
CSS Box Shadow Generator. Layered box-shadow with live preview. Stack two or three shadows with increasing blur and low opacity, for example 0 1px 2px and 0…
The short answer
To create a CSS box shadow, adjust offset, blur, spread, colour and opacity, add more layers for realistic depth, toggle inset, and copy the box-shadow CSS. The preview updates live.
It runs in your browser. What you enter is not uploaded.
How to use it
Type or paste your input into the CSS Box Shadow Generator.
Choose any options you need.
See the result update instantly.
Copy the result or download it.
Limits worth knowing
How do I make a soft, realistic shadow? Stack two or three shadows with increasing blur and low opacity, for example 0 1px 2px and 0 8px 24px at 10–15% opacity.
Does box-shadow affect layout? No. Shadows are painted outside the box and never move other elements.