This text is the preview text.
This free text-shadow CSS generator lets you build the CSS text-shadow property visually and see the result update instantly on live preview text. Use the sliders and color picker to set the horizontal and vertical offset, blur radius, shadow color, and opacity, then copy the generated declaration straight into your stylesheet. The text-shadow property adds one or more shadows behind text, making it a quick way to add depth, glow, or emphasis to headings and labels without images. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.

Frequently Asked Questions

What does the CSS text-shadow property do?

text-shadow applies one or more shadow effects to the text of an element. Each shadow takes a horizontal offset, a vertical offset, an optional blur radius, and a color, for example text-shadow: 4px 4px 4px rgba(0,0,0,0.6).

How do I add multiple text shadows to one element?

Separate each shadow with a comma in a single text-shadow declaration, such as text-shadow: 1px 1px 2px red, 0 0 8px blue. The shadows are painted front to back, so the first one listed sits on top.

Is the text-shadow property supported in all browsers?

Yes. text-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge, and no vendor prefix is needed. Only very old versions of Internet Explorer (IE 9 and earlier) lack support.

How do I create a glow effect instead of a drop shadow?

Set both the horizontal and vertical offsets to 0 and use a larger blur radius, for example text-shadow: 0 0 10px #0ff. Because the shadow spreads evenly around the text with no offset, it reads as a glow rather than a directional shadow.