Box Shadow Generator
Dial in a shadow visually and copy the declaration.
Loading tool…
About this tool
Builds a CSS box-shadow from offset, blur, spread, colour and opacity, with a live preview. Subtle shadows read better than strong ones — low opacity and modest blur usually beat the defaults people reach for.
Questions
- What is spread?
- It grows or shrinks the shadow before blurring. A negative spread pulls the shadow in, which is how you get a tight shadow directly under an element.
Privacy
This page does its work in your browser. What you paste is processed by JavaScript running on your own device and is never sent to a DevToolery server — there is no server that could receive it. The page itself is a static file delivered by a CDN. See exactly what is stored.