Apply a Linear Gradient to Text with Readable Fallbacks

Clip a background image to the text

To give text a linear gradient, paint the gradient as a background, clip that background to the letters, and make the ordinary text color transparent. The color property itself does not accept linear-gradient(). The text remains real text in the document, so readers can select it and assistive technology can still read its content.

Keep a solid text color as the starting rule. Enable the transparent fill only inside a feature query that accepts text background clipping. That structure gives an unsupported environment a readable heading instead of transparent letters with no visible replacement. It also makes the decorative enhancement easy to remove during debugging.

Add a gradient to one heading

This example uses dark blue and purple on a white page. The heading fits its content up to the available width, so a short phrase does not use a full desktop-width gradient line. Longer text may wrap normally, and unusually long words can break rather than forcing the page wider than the viewport.

<h2 class="gradient-heading">Make the next idea clear</h2>

.gradient-heading {
  width: fit-content;
  max-width: 100%;
  margin: 1rem 0;
  color: #1e3a8a;
  font: 800 clamp(2rem, 6vw, 4rem)/1.15 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background-color: #1e3a8a;
    background-image: linear-gradient(90deg, #1e3a8a, #6b21a8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .gradient-heading { background: none; color: CanvasText; }
}
@media print {
  .gradient-heading { background: none; color: #000000; }
}

The solid background-color inside the clipping rule provides a fill beneath the gradient image. If you remove the image declaration while that rule is active, the clipped solid background still paints the letters. This is separate from the outer color fallback used when the clipping enhancement is not enabled at all.

Create the starting declaration in the text tool

Open CSS Gradient Text Color, choose #1e3a8a and #6b21a8, set the angle to 90, and enter your heading in the Text field. The tool previews the text and exports the background, clipping and transparent-color declarations. The text input is a preview value; the CSS output does not insert that wording into your HTML.

Add the exported declarations to the selector for your real heading. The tool does not generate the feature query, font sizing, print rule or forced-color override in this example. Those surrounding rules are application choices that make the decorative output usable in more contexts.

Verify ordinary, forced-color and print states

In normal rendering, inspect background-clip and confirm that the gradient appears within the letters rather than as a rectangular block behind them. If the background paints across the whole heading box, check whether a later shorthand or more specific rule reset background-clip.

Enable forced colors in a supported test environment and verify that the heading becomes readable system-colored text. Do not disable the user’s forced-color preference just to preserve the decorative palette. MDN’s forced-colors reference explains why non-URL background images may be suppressed in that mode.

Check print preview separately because browsers and print settings may omit background graphics. The print override supplies solid black text without depending on that setting. If your surrounding theme has a dark printable surface, adapt both the printed text and surface together instead of copying only one color rule.

Check all colors actually used by the letters

Test contrast where the lightest part of the gradient crosses the text, not only at the dark starting color. A pale endpoint can become unreadable on white even when most letters look bold. Large decorative headings still need adequate contrast; visual prominence does not eliminate that requirement.

Change the angle to 180 and compare the vertical result, then test a longer heading at phone width. The gradient follows the heading’s painting box rather than restarting for every character. MDN’s background-clip documentation describes that clipping mechanism. Keep the actual words in HTML and use the gradient only as their visual treatment.

Apply the transparent color only to the intended heading, not to a container that also holds ordinary paragraphs. Descendants can inherit transparent text even when they do not have a matching clipped background, turning a decorative change into missing content elsewhere in the component.

Related guides

Use RGBA Transparency in a CSS Linear Gradient

Control RGBA alpha in CSS linear gradients, distinguish stop opacity from element opacity, and test the result over light, dark, and image backgrounds.

Linear Gradient Degrees

Use this guide for linear gradient degrees; it explains the workflow and how to verify code conversion, contrast and rendering context.

Linear Gradient Deg

Use this guide for linear gradient deg; it explains the workflow and how to verify code conversion, contrast and rendering context.