What is the difference between box-shadow and text-shadow?

box-shadow applies to an element's box (and supports spread and inset); text-shadow applies only to the text glyphs themselves and does not support spread or inset.

Does this tool send my input anywhere?

No - the CSS is generated entirely in your browser.

CSS Shadow Generator

Build a CSS box-shadow or text-shadow value with a live preview.

Box shadow Text shadow

Offset X

Offset Y

Blur

Spread

Color Inset

box-shadow: 4px 4px 8px 0px #00000080;

Related tools

Contrast Checker (WCAG)
Color Palette Generator
CSS Gradient Generator
Border Radius Generator

How it works

1
Pick box shadow or text shadow

Each has slightly different options.
2
Adjust offset, blur and color

See the live preview update instantly.
3
Copy the CSS

A ready-to-paste box-shadow or text-shadow property.

FAQ

What is the difference between box-shadow and text-shadow?: box-shadow applies to an element's box (and supports spread and inset); text-shadow applies only to the text glyphs themselves and does not support spread or inset.
Does this tool send my input anywhere?: No - the CSS is generated entirely in your browser.