CSS text-shadow generator

Type your text, adjust the shadow with the controls and copy the text-shadow code. By combining several layers you can create neon effects, 3D letters, outlines or embossed text.

Text shadow

Hello world

Examples:

Shadow layers

px
px
px

How text-shadow works

text-shadow takes the horizontal and vertical offset, the blur and the shadow color: for example, 2px 2px 4px rgba(0, 0, 0, 0.4). Unlike box-shadow, it has no spread or inset, and it follows the shape of each letter.

As with box-shadow, several shadows can be chained with commas; the first one is on top. That is how the examples work: neon stacks unshifted, increasingly blurred shadows, 3D adds sharp shadows offset pixel by pixel and outline places four sharp shadows around the letter.

Readability

A soft shadow helps read text over a photo, but strong shadows on long paragraphs tire the eyes. Use them on headings and buttons, and always check the contrast between text and background.