CSS Text Shadow Generator

What is text-shadow in CSS?

The text-shadow property casts one or more shadows behind the letters of a text element. Each shadow is written as a horizontal offset-x, a vertical offset-y, an optional blur radius, and a color — for example text-shadow: 2px 2px 8px rgba(0,0,0,0.5). Unlike box-shadow, text-shadow has no inset keyword and no spread radius — the property is strictly positional. The blur value softens the shadow's edge; set it to 0 for a hard, crisp outline-style shadow.

You can stack as many shadows as you like by separating them with commas — the first shadow in the list renders on top. This is the basis of every neon glow, fire effect, and 3D pop text you see on the web. This free CSS text shadow generator writes that syntax for you while you drag the text and tune each layer, then exports the result as CSS, Tailwind, or HTML ready to copy and paste.

text-shadow not showing? The most common causes: all values are zero (an invisible shadow), the color is fully transparent or matches the background, or a parent element's overflow: hidden is clipping it. Use browser DevTools to check the computed text-shadow value on the element — if it reads none the property isn't reaching the element at all (check specificity).

How to use this generator

Drag the text in the preview to set the selected shadow's offset, or use the Offset X/Y sliders for precision. Adjust blur, color, and opacity in the Shadows tab, and click Add layer to stack more shadows (up to eight). Use the Text tab to change the preview string, font size, font weight, text color, and page background — critical for effects like neon glow that require a dark backdrop. Start from a preset (Neon, Fire, 3D, Emboss, Retro, Long Shadow) or hit Random, then click Copy to copy and paste the CSS or Tailwind code directly into your project — no conversion needed.

CSS text-shadow Examples: Neon, 3D, Fire & Emboss

A few real-world effects and the CSS behind them, all reproducible with this generator. Select a preset above to apply any of these instantly, then copy and paste the output:

• Neon glow — stack two or three zero-offset shadows with increasing blur and the same bright color against a dark background: text-shadow: 0 0 8px #22d3ee, 0 0 24px #22d3ee, 0 0 48px #0ea5e9;
• Fire / sunset — layer warm colors (yellow → orange → red) at zero offset with escalating blur: text-shadow: 0 0 6px #fbbf24, 0 0 18px #f97316, 0 0 36px #ef4444;
• 3D pop — step the offset by one pixel per layer with no blur, and decrease opacity gradually: text-shadow: 1px 1px 0 rgba(0,0,0,.7), 2px 2px 0 rgba(0,0,0,.5), 3px 3px 0 rgba(0,0,0,.35), 4px 4px 0 rgba(0,0,0,.2);
• Emboss — a light shadow up-and-left and a dark shadow down-and-right creates a pressed-into-paper look: text-shadow: -1px -1px 2px rgba(255,255,255,.9), 1px 1px 2px rgba(0,0,0,.5);
• Text outline — four directional hard shadows at zero blur fakes a CSS text stroke: text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;

text-shadow in Tailwind CSS

Tailwind v4 ships a native text-shadow scale: text-shadow-sm, text-shadow, text-shadow-md, text-shadow-lg, text-shadow-xl, and text-shadow-none (to remove). For a custom value, use an arbitrary class with spaces replaced by underscores: text-shadow-[2px_2px_8px_rgba(0,0,0,0.5)].

For multiple stacked shadows, a comma inside an arbitrary class would be parsed as a class separator, so apply them with the style attribute instead: <p style="text-shadow: 0 0 8px #22d3ee, 0 0 24px #22d3ee;">. The Tailwind tab in this generator outputs the correct form automatically — a single arbitrary class for one shadow, a style attribute for two or more.

If your project still uses Tailwind v3, the native utilities aren't available — you'll need a third-party plugin (such as @designbycode/tailwindcss-text-shadow) or apply shadows directly with a style attribute. A common cause of "text-shadow not working in Tailwind" is exactly this version mismatch: the class exists in v4 but not v3, and fails silently rather than erroring.

text-shadow vs box-shadow

text-shadow follows the shape of each glyph (letter), painting behind the rendered text pixels. box-shadow follows the element's rectangular border box, regardless of what's inside it. The practical differences:

• text-shadow has no inset (you can't draw a shadow inside the letters) and no spread radius.
• box-shadow supports both inset and a spread value that grows or shrinks the shadow before blurring.
• For glow effects on text, use text-shadow — it traces the letter shapes. For glow on a card or button, use box-shadow.

Neither property affects layout: both are purely visual effects that don't change an element's size or push neighboring content. Modern browsers composite them on the GPU, so even layered shadows are generally performant — though very large blur values on large blocks of text can trigger an occasional repaint cost.

Building the rest of the component? Pair this with our CSS Box Shadow Generator for element-level shadows, the CSS Border Radius Generator for corners, and the CSS Gradient Generator for fills.