CSS background-clip text: keep a decorative headline readable

When to use it

A public report headline may use a two-tone accent for a campaign page, while the actual heading remains ordinary HTML text. Start with a high-contrast solid color. In a supporting browser, apply a local gradient, clip it to the text, and make the glyph fill transparent. Restore a system text color in forced colors so the heading does not disappear when decorative backgrounds are suppressed. Test the heading against its real page background, on narrow lines, at high zoom, with background images disabled, and in print. A gradient that looks attractive on a large title can leave thin strokes too pale. Keep the gradient decorative: do not encode two separate statuses in its colors, and do not use a pseudo-element copy of the heading as the only text. If the enhanced effect fails, the fallback must still satisfy the design's information and contrast requirements.

.report-hero__title { color: #164d68; }
@supports (background-clip: text) { .report-hero__title { background: linear-gradient(90deg, #164d68, #276b85); background-clip: text; color: transparent; } }
@media (forced-colors: active) { .report-hero__title { background: none; color: CanvasText; } }

Cost and verification

Clipping a small static headline is usually modest, but animated gradients or large text surfaces can add paint work. There is little reason to animate this effect in a data-heavy dashboard. The main risk is readability: transparent text depends on the clipped background being painted and on both gradient ends having sufficient contrast. Automated checks may not understand the full gradient, so inspect the palest segment of each glyph against the actual backdrop. Print and forced-color output deserve separate checks. Keep a solid text color before the enhanced rule and never make the CSS effect responsible for the heading's semantics or navigation target.

Common Mistakes

• Do not set transparent text outside a guarded, working clipped-background rule.
• Do not assume every part of a gradient meets text contrast.
• Do not let forced-color mode erase the heading.

Connected lessons

• CSS Property Decisions
• CSS color and contrast: pair text with its real surface
• CSS gradients and shadows: decorate without hiding content
• CSS forced-color-adjust: preserve a color only for a narrow reason