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 陰影產生器

用即時滑桿視覺化建立 box-shadow 與 text-shadow CSS,一鍵複製。

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.

常見問題

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.

Last updated: 2026-05-20 By jarvisbox