How to Generate a CSS Text Shadow

Text shadows can add subtle depth to headings, create eye-catching neon effects for hero sections, or improve readability by adding contrast between text and a busy background image. Getting the values right by tweaking CSS and refreshing is slow; the CSS text shadow generator lets you design the effect visually and then grab the code.

Understanding text shadow techniques

The text-shadow property accepts the same basic parameters as box-shadow (horizontal offset, vertical offset, blur radius, and color) but applies them to the text glyphs rather than the element’s box. Unlike box-shadow, there is no spread value and no inset option.

Subtle depth shadows use a small offset (1-2px) with low-opacity dark color and minimal blur. This is the most common use case: giving headings a slight three-dimensional quality without being distracting. The classic recipe is 1px 1px 2px rgba(0, 0, 0, 0.2).

Neon glow effects use zero offset with a large blur radius and a bright, saturated color. The key is layering multiple shadows of the same hue at increasing blur radii. For example:

text-shadow:
  0 0 7px #fff,
  0 0 10px #fff,
  0 0 21px #fff,
  0 0 42px #0fa,
  0 0 82px #0fa,
  0 0 92px #0fa;

Each layer adds to the glow, building up from a tight white core to a wide colored halo. This technique works best on dark backgrounds with light or white text.

Outline or stroke effects can be approximated by applying four shadows at 1px offsets in each cardinal direction: 1px 0, -1px 0, 0 1px, 0 -1px. While CSS now has -webkit-text-stroke, the text-shadow approach works across all browsers and gives you more control over the color and softness of the outline.

Letterpress or inset text is achieved with a 1px vertical offset using a color lighter than the background (on a dark background) or darker (on a light background). This makes the text appear pressed into the surface.

Tips and best practices

• Keep blur values small for body text. Heavily blurred shadows on small text make it look fuzzy and harder to read. Reserve large blur effects for headings and display text.
• Match the shadow color to the design context. Use dark shadows on light backgrounds and light shadows on dark backgrounds. Colored shadows (like a blue glow on blue text) work well for accents but can feel out of place if overused.
• Combine with the box shadow generator for cohesive depth. When your cards use box shadows for elevation, adding a matching text shadow to the heading inside the card ties the depth cues together.
• Test readability at different sizes. A shadow that looks great on a 48px heading might be illegible at 14px. Always check your text shadow at the smallest size it will appear.

Common issues

• Text looks blurry instead of glowing: Your blur radius is too large relative to the text size, or the shadow color is too close to the text color. Reduce the blur or increase the color contrast between the text and its shadow.
• Shadow is visible but the text is not: This happens when the text color matches the background and only the shadow is creating contrast. Set the text color explicitly rather than relying on the shadow to make the text readable.
• Performance lag with many shadowed elements: Layered text shadows on hundreds of elements (like a long list) can cause jank during scrolling. If you notice performance issues, reduce the number of shadow layers or apply the effect only to elements that are visible in the viewport.