CSS Shadow Generator | box-shadow, text-shadow & drop-shadow code maker

2026年6月16日

CSS Shadow Generator

Generate box-shadow, text-shadow, and drop-shadow code with intuitive sliders and a live preview.

This tool has been used … times.

Shadow Type

Box Shadow Drop Shadow Text Shadow

Preview Text

Presets

Shadow Color

Shadow Direction

Outset Inset

Blur

Opacity

Spread

X Offset (Horizontal)

Y Offset (Vertical)

Background

Shape

Preview

How to Use

Box Shadow

Adds a shadow around the whole element. Choose inset to place the shadow on the inside.

Text Shadow

Adds a shadow to text only. Spread is disabled for this type. Use the Preview Text field to test your own words.

Drop Shadow

Adds a shadow that follows transparent images and complex shapes. Spread and Inset are disabled for this type.

RELATED TOOLS

Please also review the Terms of Use for this web app before using it.

Found a bug or have feedback? Let us know here.

よかったらシェアしてね！