CSS Text Effects: Shadows, Outlines, Gradients, and Masks in Practice

Plain text communicates content. Styled text communicates intent. The CSS properties for text effects — text-shadow, -webkit-text-stroke, background-clip with text, and -webkit-text-fill-color — are the tools that bridge the gap between a paragraph and a visual statement. Each one is simple in isolation, but each carries specific rendering, performance, and accessibility implications that are easy to overlook when you are focused on the visual result. This guide covers the four major text effect techniques, explains how they work under the hood, and identifies the traps that catch designers in production.

Text Shadow

text-shadow is the oldest and most widely supported of the CSS text effects. It accepts a horizontal offset, a vertical offset, an optional blur radius, and a color. Multiple shadows can be stacked by comma-separating the declarations. A single subtle shadow — something like text-shadow: 0 1px 2px rgba(0,0,0,0.15) — adds depth to headings without drawing attention to itself. A dramatic shadow — large offset, high blur, saturated color — turns text into a graphic element.

The performance concern with text-shadow is not the shadow itself but the blur radius. A large blur radius forces the browser to compute a Gaussian kernel over the shadow buffer, which is expensive. On a page with a single heading this cost is negligible. On a page with hundreds of shadowed elements — a data table, a list of cards — the compositor can drop frames during scrolling. The practical rule is to keep blur radii under 20 pixels for elements that appear many times on a page, and to use will-change: transform on containers that scroll if you must use larger values.

Accessibility matters here too. A shadow that reduces the effective contrast between text and background fails WCAG requirements. A white text with a dark shadow on a light background may look fine visually, but if the shadow does not sufficiently increase the contrast ratio, the text is effectively low-contrast. Always verify the overall contrast with a tool, not just your eye.

Text Stroke and Outline

-webkit-text-stroke draws an outline around each glyph. It accepts a width and a color. The stroke is drawn centered on the glyph outline, which means half the stroke width falls inside the glyph and half falls outside. For thin strokes on large text this is barely noticeable. For thick strokes on small text the stroke eats into the fill, making the letterform thinner and harder to read. The workaround is to increase the font-weight or font-size to compensate.

The -webkit- prefix is not cosmetic. As of mid-2026, text-stroke remains a WebKit-originated property with no unprefixed standard equivalent. It works in every major browser — Chrome, Safari, Firefox, Edge — but it is not on the standards track. If you need a standard-compliant outline, the alternative is paint-order: stroke fill combined with an SVG text element, or a CSS outline on a pseudo-element. For most practical purposes, -webkit-text-stroke is safe to use, but it should not be the only visual indicator of importance.

Gradient Text

Gradient text is achieved by applying a CSS gradient as a background image and then clipping it to the text shape with -webkit-background-clip: text and setting -webkit-text-fill-color: transparent. The gradient can be linear, radial, or conic, and it can be animated by transitioning the background-position or background-size. The effect is visually striking and has become a staple of modern web design.

The critical failure mode is forgetting -webkit-text-fill-color: transparent. Without it, the gradient is painted behind the opaque text fill and is invisible. With it, the gradient shows through the text but the text is no longer selectable in some older browsers — a bug that has been fixed in current versions but is worth testing if your audience includes users on older devices.

Gradient text also fails the contrast check. Because the text color varies across the gradient, no single contrast ratio applies. The safest approach is to ensure that every color in the gradient meets the minimum contrast ratio against the background. If the gradient transitions from a high-contrast color to a low-contrast color, the low-contrast portion is effectively inaccessible. The Text Mask and Gradient Text tools on this site let you preview the effect and check contrast at multiple points along the gradient.

Text Mask and Clip

The most dramatic text effect is masking — using text as a clip path for an image or video. The CSS technique is the same as gradient text: background-clip: text with a transparent fill color, but instead of a gradient the background is an image or even a short video. The text becomes a window into the background content.

The performance cost of masked text depends on the background. A static image is cheap — the browser composites it once. An animated background — a looping video, a CSS animation on the background-position — requires the compositor to repaint the clipped region on every frame. On a single hero element this is usually fine. On multiple elements it can cause jank, especially on mobile devices with limited GPU memory.

A Practical Checklist

Before shipping any text effect, run through this checklist. Does the effect preserve text selectability? Does it maintain sufficient contrast against the background in every state — hover, focus, dark mode? Does it render correctly when the user increases their font size by 200 percent, as many readers do? Does the effect add meaning or emphasis, or is it decoration that could be removed without losing information? If the answer to the last question is decoration, the effect must not be the only way the information is conveyed.

The tools on this site — Text Shadow Generator, Text Stroke, Gradient Text, and Text Mask — are designed to help you experiment with these effects quickly and export production-ready CSS. Use them to prototype, then test the result against the checklist. The best text effects are the ones that enhance communication without sacrificing accessibility or performance.