CSS Shadow Generator
Visually build box-shadow and text-shadow CSS rules. Adjust all parameters with sliders, see a live preview, and copy the CSS.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
Frequently Asked Questions
What is the difference between box-shadow and text-shadow?
box-shadow applies a shadow to an element's box (the rectangular area including padding and border). text-shadow applies a shadow specifically to the text characters inside an element.
What does the 'Spread' parameter do?
Spread (box-shadow only) expands or contracts the shadow beyond the blur. A positive value makes the shadow larger than the element; a negative value makes it smaller.
What does 'Inset' do?
When checked, the box-shadow is rendered inside the element instead of outside, creating an inner glow or pressed effect.
How is the color applied?
The CSS output uses rgba() with the chosen color and opacity slider value. This allows you to set the shadow transparency independently from the base color.
box-shadow Syntax
/* Single shadow */ box-shadow: <x-offset> <y-offset> <blur> <spread> <color>; /* Example */ box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.15); /* Inset shadow (inside the element) */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Multiple shadows (comma-separated, front to back) */ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
Parameter Reference
| Parameter | Effect |
|---|---|
| X offset | Horizontal displacement — positive shifts right, negative shifts left |
| Y offset | Vertical displacement — positive shifts down, negative shifts up |
| Blur | Blur radius — 0 = sharp edge, higher = softer shadow |
| Spread | Expands (+) or shrinks (−) the shadow relative to the element |
| Color | Any CSS color — use rgba/hsla for transparency |
| Inset | Keyword: renders the shadow inside the element border |
Performance Notes
- Use
box-shadowoverfilter: drop-shadowfor rectangular elements — it's GPU-accelerated and cheaper to repaint. - Avoid animating
box-shadowdirectly — animate opacity between two pseudo-elements instead to avoid triggering layout/paint. - Limit shadow layers — stacking more than 3–4 shadows per element starts to impact scroll performance on mobile.