Web / CSS

Shadow Generator

Create CSS shadows for box-shadow and text-shadow with a live preview. The tool helps with cards, buttons, text, overlays and UI elements.

Generator

Configure shadow

All settings are processed locally in the browser. No input is sent to the server.

Shadow type

CSS property Profile CSS selector

Values

Offset X 0px Offset Y 18px Blur 42px Spread -18px Opacity 28%

Color and output

Shadow color Preview background Element color Output

Use inset shadow Rounded preview corners Update values automatically

Shadow preview

Current value box-shadow

Adjust the sliders to change the shadow live.

CSS code

For cards, panels, buttons and overlays. The values consist of X offset, Y offset, blur, spread and color.

For headings, hero sections and subtle readability improvements on images. Spread is not used for text shadows.

For modern interfaces, larger blur values with low opacity often feel calmer than hard, dark shadows.