CSS Text Shadow Generator
Create neon glows, retro effects, 3D shadows and more. Adjust offset, blur and color — copy production-ready text-shadow CSS instantly.
CSS generated is free to use in any project — no attribution required.
How do you use the CSS text-shadow generator?
Select a preset — Neon Blue, Retro, 3D and the rest — or drive the sliders yourself. The horizontal offset moves the shadow left and right, the vertical offset moves it up and down, and the blur radius controls how soft the edge is. The preview updates on every change, and the CSS panel always shows exactly what you will paste.
What is the CSS text-shadow syntax?
The property takes text-shadow: offset-x offset-y blur-radius color. Only the two offsets are required — text-shadow: 2px 2px red is valid and gives a hard-edged shadow with no blur. The color may come first or last; both orders parse, though putting it last is the common convention.
What do the offset, blur and color values actually do?
The horizontal offset shifts the shadow along the X axis: positive moves it right, negative moves it left. The vertical offset does the same on the Y axis, positive moving it down. The blur radius spreads the shadow outwards — zero gives a crisp duplicate of the glyph, and larger values fade it into a halo. It cannot be negative.
Unlike box-shadow, there is no spread value. If you want a bigger shadow you increase the blur or stack more layers; you cannot inflate the glyph itself.
How do you stack multiple text shadows?
Comma-separate them. Shadows paint front to back in the order written, so the first in the list sits on top and the last sits furthest behind: text-shadow: 0 0 6px cyan, 0 0 18px cyan. Every visually interesting text effect on this page is built this way — a single shadow can only ever be one flat offset copy.
How do you create a neon glow effect in CSS?
Set both offsets to zero so the glow sits symmetrically around the glyph, pick a vivid color such as cyan (#22d3ee) or pink (#f472b6), and stack at least two copies: a tight one with a small blur for the bright core, and a wide one with a large blur for the falloff. Adding a third, wider layer at a lower alpha sells the effect further. Light text on a dark background is what makes it read as neon rather than as a smudge.
How do you create a retro or 3D text shadow?
For the flat retro look, use a small positive offset on both axes with the blur at zero — text-shadow: 3px 3px 0 #f472b6 — so the shadow reads as a hard offset duplicate.
For extruded 3D, stack several zero-blur shadows at incrementing offsets: 1px, 2px, 3px and so on, each one step further, using the same color or a progressively darker one. The stack of hard copies forms the illusion of a solid side face.
How do you outline text with text-shadow?
Place four zero-blur shadows one pixel out in each direction: text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black. It is a workable trick, but it is an approximation — the diagonals stay thin, and the cost grows as you thicken the outline.
When a real outline is what you want, -webkit-text-stroke paired with paint-order: stroke fill draws a true stroke that keeps the glyph shape intact. Keep text-shadow for glows and offsets, where it is genuinely the right tool.
What is the difference between text-shadow and box-shadow?
text-shadow follows the shape of the glyphs; box-shadow follows the element’s rectangular border box, rounded corners included. Putting box-shadow on a heading shadows the invisible block the text sits in, not the letters.
The two also differ in syntax: box-shadow adds a spread value and an inset keyword, neither of which exists for text. There is no inset text shadow — the usual approximation is a light shadow below and a dark one above.
Does text-shadow hurt performance or readability?
Large blur radii are the expensive part, because the browser rasterizes the blur on every repaint. A heavy multi-layer glow on a body paragraph, or on text that animates or scrolls, is where it becomes noticeable; on a handful of headings it is free in practice.
Legibility deserves more attention than performance here. A shadow reduces the effective contrast between the glyph and its background, so it is easy to build something striking that fails a contrast check. Verify the contrast ratio of the text against the background it actually sits on, and treat a heavy glow as decoration for display type rather than something to apply to reading copy.
What is the browser compatibility for CSS text-shadow?
text-shadow is supported in every modern browser without vendor prefixes and has been for well over a decade — Chrome, Firefox, Safari and Edge all handle multiple comma-separated shadows identically. The one adjacent property to check before shipping is -webkit-text-stroke, which is still prefixed everywhere despite being broadly available.