Make Gradient Text in CSS with a Readable Fallback

Clip a background image to the text

To make text use a color gradient in CSS, give the element a gradient background and clip that background to its text. A gradient is an image value, so it cannot be assigned directly to the color property. Keep a readable solid text color as the initial style and enable transparent text only inside the supported clipping rule.

Use this effect for a short heading whose actual background you control. Long paragraphs, small navigation labels and frequently changing backgrounds make gradient readability harder to review. The example uses dark purple and teal over white; changing either endpoint or the surrounding surface requires another visual and contrast check.

Start with a complete heading style

<h1 class="gradient-heading">Plan a clearer route</h1>

.gradient-heading {
  color: #25304a;
  font: 700 clamp(2rem, 6vw, 4rem) / 1.15 system-ui, sans-serif;
  max-width: 16ch;
}

@supports (background-clip: text) {
  .gradient-heading {
    background-image: linear-gradient(90deg, #4c1d95, #0f766e);
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-heading {
    background-image: none;
    color: CanvasText;
  }
}

The heading remains real text. It can wrap, be selected and be exposed to assistive technology without using an image of the words. Put it on a white surface for this example. The solid initial color also remains available when the clipping declaration is unsupported.

Control the area over which the colors run

The gradient is painted across the element's background area, not independently across every letter. A full-width block heading can therefore use only a small portion of the gradient if the text is short. Inspect the element's box in developer tools when the expected final color never seems to appear.

For a single short line, an inline-block or width: fit-content can bring the background area closer to the text width. For a wrapping heading, keep the width appropriate for the layout and decide whether a single gradient across the whole heading is the intended effect. Do not force white-space: nowrap merely to preserve the colors on a narrow phone.

Review all colors that cross the letter shapes

Checking only the first and last colors is not a complete readability review. The intermediate colors also appear inside glyphs, and the background behind those glyphs may vary. Inspect the whole word, its thin strokes and the smallest size used in the design.

If a heading sits over a photo, moving or cropping the photo can change contrast even when the gradient CSS stays identical. An opaque, predictable heading surface is easier to maintain. If the design cannot provide adequate contrast across the full text, retain the solid text color and use a decorative gradient elsewhere.

Fix invisible or unexpectedly plain text

If the words disappear, inspect whether another rule has set the background image to none while leaving the text transparent. Background shorthand declarations later in the stylesheet can reset the image. Keep the clipping rule near the component styles and review the computed background-image and color together.

If an older style sets -webkit-text-fill-color: transparent, changing color alone may not restore visible text. Remove that inherited component rule or explicitly reset text fill where the fallback is applied. Do not add prefixed declarations blindly without testing the browsers you support.

Test a narrow viewport, a two-line heading, browser zoom and forced-colors mode. The sample explicitly restores a system text color in forced colors. Also test the surrounding focus indicators when the styled text is a link; a decorative fill must not hide the user's keyboard position.

The background-clip reference describes the clipping property. Use the gradient generator to explore two endpoint colors, then apply the generated gradient inside this text-specific style rather than replacing the entire rule with a background shorthand.

Related guides

Make Gradient Text

Learn make gradient text: follow a focused other developer utilities workflow, then verify code conversion, contrast and rendering context on the final result.

Use CSS Gradients as Reusable Background Values

Add gradient color in CSS with image-valued custom properties, reuse a palette across components, and keep text colors separate from background gradients.

Apply a Linear Gradient to Text with Readable Fallbacks

Apply a linear gradient to live text with background clipping, preserve a solid fallback, and restore readable text in forced-color and print modes.