Codectionary / Developer documentation / CSS

Gradient Text with a Solid Fallback

Text-clipped backgrounds can fill letter shapes with a gradient.

What it is and why to use it

Text-clipped backgrounds can fill letter shapes with a gradient. This is useful for a short decorative heading, provided the text remains readable when the enhancement is unavailable or backgrounds are adjusted. Start with a solid colour and make transparency conditional on support.

Common mistakes and limitations

Making text transparent without a reliable painted fallback can hide it. Syntax support alone does not establish readable contrast across a gradient. Older implementations may have prefixed behaviour; verify the browsers you support before depending on it.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<h2 class="headline">Learn something useful</h2>

Syntax

background-clip: text;

Examples

Gradient Text with a Solid Fallback

Run the CSS against the supplied HTML, then experiment with the values.

.headline { color: #1d4ed8; font: bold 2rem system-ui; }
@supports (background-clip: text) {
  .headline { background: linear-gradient(90deg, #1d4ed8, #7c3aed); background-clip: text; color: transparent; }
}
@media (forced-colors: active) { .headline { background: none; color: CanvasText; } }
  1. The solid blue foreground works before the support query matches.
  2. Supported browsers clip the gradient to the glyphs and make the ordinary text foreground transparent.
  3. The forced-colors rule restores a system foreground. Use the effect sparingly for headings rather than long body text.
HTML used by this example
<div class="demo"><h2 class="headline">Learn something useful</h2></div>

Best practices

  • Making text transparent without a reliable painted fallback can hide it. Syntax support alone does not establish readable contrast across a gradient. Older implementations may have prefixed behaviour; verify the browsers you support before depending on it.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading