Background:
(Click preview box to resize)
PREVIEW
CSS Output
Presets
Shadows
Edit selected shadow
4px
4px
8px
0px
20%
Multiple shadow layersCombine ambient, directional, glow and inset layers for realistic depth.
Precise controlsIndependently control offset, blur, spread, color and opacity for every layer.
Production-ready outputCopy declarations or raw values, download CSS and restore your design after refresh.
How to create a polished CSS box shadow
- Choose a preset or begin with the default shadow.
- Set horizontal and vertical offsets to establish the light direction.
- Increase blur for softness and adjust spread to change the footprint.
- Use low opacity for natural elevation or a brand color for a glow.
- Add layers for richer depth, then copy or download the CSS.
Understanding box-shadow values
The order is horizontal offset, vertical offset, blur radius, spread radius and color. Positive offsets move right and down. Blur softens the edge, spread expands or contracts the footprint, and inset paints the shadow inside the object.
Practical design tips
- Combine a tight contact shadow with a wider low-opacity ambient layer.
- Avoid pure black at high opacity; tinted neutral shadows usually feel more natural.
- Keep elevation consistent so depth communicates hierarchy.
- Test the result against the actual background in light and dark themes.
Frequently Asked Questions
Can CSS use multiple box shadows?
Yes. Separate layers with commas. The first shadow is painted on top of the layers that follow.
What is the difference between blur and spread?
Blur controls edge softness. Spread changes the shadow's base size before blur is applied.
Does box-shadow affect layout size?
No. Shadows are painted without changing the element's document dimensions.
Is my design uploaded?
No. The editor runs locally in your browser and stores the latest settings locally for restoration after refresh.