CSS box-shadow generator

Adjust offset, blur, spread and color with live preview, then copy the generated box-shadow CSS.

X offset: 0px

Y offset: 10px

Blur: 24px

Spread: 0px

Color

Opacity: 20%

Inset shadow

box-shadow: 0px 10px 24px 0px rgba(16, 19, 26, 0.20);

Frequently asked questions

Can I create an inset shadow?

Yes, enable the inset toggle to generate an inner shadow.

Can I stack multiple shadows?

This tool generates one shadow layer; combine multiple copied values with commas for layered shadows.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator

Font Pairing Finder

Preview heading and body Google Font combinations side by side.

Use Font Pairing Finder

CSS box-shadow generator

Adjust offset, blur, spread and color with live preview, then copy the generated box-shadow CSS.

X offset: 0px

Y offset: 10px

Blur: 24px

Spread: 0px

Color

Opacity: 20%

Inset shadow

box-shadow: 0px 10px 24px 0px rgba(16, 19, 26, 0.20);

Frequently asked questions

Can I create an inset shadow?

Yes, enable the inset toggle to generate an inner shadow.

Can I stack multiple shadows?

This tool generates one shadow layer; combine multiple copied values with commas for layered shadows.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator

Font Pairing Finder

Preview heading and body Google Font combinations side by side.

Use Font Pairing Finder