Can I add multiple shadows?

CSS supports multiple comma-separated shadow values. This tool generates a single shadow value; you can manually combine multiple outputs into one CSS property.

What is the spread radius?

Spread radius expands or contracts the shadow beyond the blur. A positive value makes the shadow larger than the element; a negative value shrinks it. Useful for inset shadows and glow effects.

Does it work on mobile?

Yes. The sliders and live preview work in any modern mobile browser. Use your finger to drag the sliders.

CSS Shadow Generator — box-shadow & text-shadow Builder

CSS Shadow Generator

Build box-shadow and text-shadow CSS visually — adjust sliders, preview live, copy in one click.

100% client-side · no upload

Offset X 4px

Offset Y 4px

Blur 10px

Spread 0px

Color

Opacity 30%

Inset shadow

How to use the CSS shadow generator

Choose between box-shadow (for elements) or text-shadow (for text).
Adjust the sliders for offset, blur, spread, color, and opacity.
Preview updates live in the box on the right.
Click Copy to copy the CSS declaration to your clipboard.

Frequently Asked Questions

Can I add multiple shadows?: CSS supports multiple comma-separated shadow values. This tool generates a single shadow value; you can manually combine multiple outputs into one CSS property.
What is the spread radius?: Spread radius expands or contracts the shadow beyond the blur. A positive value makes the shadow larger than the element; a negative value shrinks it. Useful for inset shadows and glow effects.
Does it work on mobile?: Yes. The sliders and live preview work in any modern mobile browser. Use your finger to drag the sliders.