CSS Box Shadow Generator
Free online CSS Box Shadow Generator. Create complex, layered box-shadows with real-time preview. Customize offset, blur, spread, color, and inset properties.
CSS Box Shadow Generator
Free online CSS Box Shadow Generator. Create complex, layered box-shadows with real-time preview. Customize offset, blur, spread, color, and inset properties.
About CSS box shadows
Builds comma-separated shadow layers
Each layer becomes one box-shadow entry with optional inset, horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple layers are joined in the same declaration, matching standard CSS box-shadow syntax.
Box colors are preview settings
Background and box colors help you see whether the shadow works on light or colored surfaces. They are not included in the copied snippet, which contains only the generated box-shadow declaration.
Blur softens edges; spread changes size
Keep offset, color and spread fixed, then increase blur from 0 to 20 px to see a sharp edge become a soft transition. Reset blur to 0 and increase spread from 0 to 10 px: the shadow grows on every side while its edge stays sharp. CSS applies spread before blur, so use spread to adjust the shadow footprint and blur to soften it.
Use negative spread to narrow an outer shadow
Turn inset off, set horizontal offset to 0, vertical offset to 12 px and blur to 16 px, then compare spread at 0 and -8 px. Negative spread shrinks the shadow before blurring; with a downward offset, more of it hides behind the box and the effect concentrates below it. This does not strictly remove shadows from the other sides. A large negative spread can make the shadow disappear; inset instead switches it to the inside of the box.
The first shadow is painted on top
For overlapping outer shadows, the first value in the comma-separated list is painted on top. This tool outputs layers in their displayed order, with each new layer appended at the end. Put a small, distinct shadow in the first layer and a wider, softer one in the second. If the second becomes hard to see, reduce the first layer's opacity or spread. Inset shadows sit above the box background, while outer shadows sit behind the box; list order does not move an outer shadow inside.
FAQ
Common questions and answers about this topic.
What properties can I customize?
You can customize horizontal and vertical offset, blur radius, spread radius, shadow color, and toggle inset shadows.
Can I add multiple shadows?
Yes, layer multiple shadows for complex depth effects. Each layer can have its own offset, blur, spread, and color settings.
Does it generate cross-browser compatible code?
Yes, the standard CSS box-shadow property works in all modern browsers without vendor prefixes.
Is my data sent to any server?
No, box-shadow CSS generation runs entirely in your browser. Your shadow settings are processed locally with JavaScript and never leave your device.