🅢CSS Text Shadow Generator

About this tool

Pick a preset or start from scratch, then add, remove and adjust shadow layers with sliders for horizontal and vertical offset, blur and opacity, and a colour picker for each. Set the text and background colours, click the preview to type your own words, and copy the finished CSS.

How CSS text-shadow works

The text-shadow property draws shadows behind text. Each shadow is written as a horizontal offset, a vertical offset, an optional blur radius and a colour, such as 2px 2px 4px rgba(0, 0, 0, 0.3), and you can list several separated by commas. The first one is drawn on top. A single soft shadow lifts a heading off the page. Stacking zero-blur layers that each step one pixel further down and right builds a solid 3D extrusion; two offset solid layers in contrasting colours give a retro poster look. A neon glow uses white text with several layers of the same bright colour at increasing blur, which works best on a dark background. Four one- or two-pixel shadows pointing to each corner fake an outline, which is more widely supported than -webkit-text-stroke. A light shadow above and a dark one below, on text the same colour as its background, gives an embossed effect. Honest limits: many layers and large blurs cost rendering time, especially on long text, animations and phones, so keep heavy effects for headings. Make sure the text still has enough contrast with its background to be readable; glows and embosses can reduce it. The box shadow generator does the same for elements, the gradient generator makes backgrounds and the glassmorphism generator creates frosted panels.

Frequently asked questions