CSS background-clip Text: Browser Support, Use Cases, Fixes

What is background-clip: text?

background-clip: text is the keyword value of the CSS background-clip property that paints an element's background image, gradient, or color only behind the rendered text. The W3C defines it in CSS Backgrounds and Borders Module Level 4. Authors typically pair it with -webkit-text-fill-color: transparent so the background shows through the glyphs.

Which browsers does background-clip: text support?

background-clip: text ships in every modern engine, but the path to unprefixed support was uneven. Most browsers honored only -webkit-background-clip: text for years, and Chromium dropped the prefix only in Chrome 120. Internet Explorer never shipped either form.

How do you use background-clip: text with a gradient?

A gradient text effect needs four declarations on the same element: a background, the prefixed and unprefixed background-clip values, and a transparent foreground. The browser paints the gradient behind the glyphs and clips it to the text outline.

• Set the background: Apply a linear-gradient, radial-gradient, conic-gradient, or url() image as the background of the element that holds the text.
• Add -webkit-background-clip: text: The prefixed property covers Safari, older Chromium, older Edge, and older Samsung Internet builds.
• Add background-clip: text: The unprefixed property covers Chrome 120+, Edge 120+, Firefox 49+, Safari 15.5+, Opera 106+, and Samsung Internet 25+.
• Make the text transparent: Set color: transparent so the page background does not show, and -webkit-text-fill-color: transparent to override the foreground in WebKit and Blink.
• Verify the result in DevTools: Inspect the element and confirm the computed background-clip is text. If the gradient is missing, the foreground is not transparent or the prefix is missing.

/* 1. Gradient text. The transparent foreground lets the clipped gradient show through. */
.gradient-headline {
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 2. Image-filled text. Works the same way with a raster background. */
.image-headline {
    background: url("/static/hero-pattern.jpg") center / cover no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 3. Animated gradient text. Slide the background to make the gradient drift across the glyphs. */
.animated-headline {
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ff6b6b);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: drift 6s linear infinite;
}
@keyframes drift {
    from { background-position: 0% 0%; }
    to { background-position: 200% 0%; }
}

/* 4. Accessible fallback. Solid color when the engine cannot clip to text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .gradient-headline,
    .image-headline,
    .animated-headline {
        background: none;
        color: #1a73e8;
    }
}

What are the common pitfalls of background-clip: text?

background-clip: text works on every modern engine, but a handful of quirks still make the effect silently fail in production. Most pitfalls trace back to the transparent foreground, the -webkit- prefix, parent stacking contexts, and accessibility regressions.

• Forgotten transparent foreground: The most frequent failure. Without color: transparent and -webkit-text-fill-color: transparent, the solid foreground paints over the clipped background, and the gradient never shows.
• Missing -webkit- prefix: Safari 15.4 and earlier, Chromium 119 and earlier, and Samsung Internet 24 and earlier need -webkit-background-clip: text. Drop the prefix and the property dies on every iPhone running iOS 15.4 or older.
• Applied to a parent instead of the text element: Safari only honors background-clip: text on the element that renders the glyphs. Apply it to a wrapper and the WebKit engine ignores it, even though Chrome and Firefox still clip correctly.
• Buttons and form controls reset the foreground: Safari does not clip backgrounds to text on native button elements. Wrap the text in a span inside the button and apply background-clip: text to the span.
• Accessibility loss for selected text: Highlighted text inherits the background, so the gradient stays under the selection color. Add a ::selection rule with a solid color to keep the selection legible.
• Print stylesheet failure: Printers usually ignore background-image, so the text prints as a transparent block. Override with @media print { color: black; background: none; -webkit-text-fill-color: black; }.

In my experience, the trap that bites teams hardest is shipping background-clip: text on a button label, watching it work in Chrome and Firefox during development, then seeing the entire button text vanish on iPhones because Safari treats the form control's foreground specially.

How do you provide a fallback for background-clip: text?

A fallback matters for Internet Explorer, very old Android WebViews, and any browser that disables background-image. Use the @supports rule to feature-detect background-clip: text and ship a solid foreground color when the engine cannot clip a background to glyphs.

• @supports feature query: Wrap the gradient rule in @supports ((-webkit-background-clip: text) or (background-clip: text)) and put the solid color rule outside the query. Browsers that do not understand the query keep the solid color.
• Solid fallback color first: Declare color: #1a73e8 before the transparent declaration. Internet Explorer and old WebViews ignore the later -webkit-text-fill-color and keep the solid color, so the headline still reads.
• SVG text alternative: For brand-critical headlines, render the text inside an SVG element with a fill="url(#gradient)" reference. SVG gradients ship in every browser back to Internet Explorer 9, so the gradient text works without background-clip.
• Pre-rendered image as last resort: When SVG and CSS both fail, embed a high-resolution PNG with a transparent background and an alt attribute carrying the headline text. Use srcset to serve a 2x asset on retina screens.
• Contrast audit on the fallback: The solid fallback color must meet WCAG 2.1 contrast against the page background. A gradient text effect can pass on its midpoint and fail on its end stops, so the audit should target the chosen fallback color, not the gradient.

Citations

All background-clip: text version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - background-clip: developer.mozilla.org/en-US/docs/Web/CSS/background-clip
• W3C CSS Backgrounds and Borders Module Level 4: w3.org/TR/css-backgrounds-4
• Chrome Platform Status - Unprefix -webkit-background-clip: text: chromestatus.com/feature/5125388091260928
• Mozilla Bugzilla 759568 - Implement -webkit-background-clip: text: bugzilla.mozilla.org/show_bug.cgi?id=759568
• MDN Web Docs - -webkit-text-fill-color: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
• Mozilla Firefox 49 release notes: mozilla.org/en-US/firefox/49.0/releasenotes
• WebKit blog - Backgrounds and borders in WebKit: webkit.org/blog/16214/background-clip-border-area
• MDN Web Docs - @supports: developer.mozilla.org/en-US/docs/Web/CSS/@supports
• Microsoft Learn - Microsoft Edge developer documentation: learn.microsoft.com/en-us/microsoft-edge/web-platform
• Wikipedia - Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Web Platform Baseline: web.dev/baseline