Limited support Useful when background-clip: text adds emphasis or visual refinement without becoming necessary for understanding content.

background-clip: text

The background-clip: text CSS declaration draws the background underneath only the text in the element.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.background-clip.text
120
120
49
14
120
14
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`; see bug 40229927).
Notes 6 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
  • This feature was removed in a later browser version (79)
  • This feature was removed in a later browser version (15)
Implementation note
  • The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`; see bug 40229927).
Compatibility
  • Before Edge 15, this value was supported with the prefixed version of the property only.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not work with `background-attachment: fixed` (bug 1313757), in multi-layer backgrounds with other values (bug 1481498), and in some other special cases (see bug 1656784).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14)
Implementation note
  • The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`; see bug 40229927).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14)
Implementation note
  • The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`).

Syntax

CSS 
.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Live demo

Gradient text

CSS Gradientcharacter demo.

PreviewFullscreen

imagetekscha

CSS imagetekscha demo.

PreviewFullscreen

animation

CSS animation demo.

PreviewFullscreen

Use cases

  • Decorative enhancement

    Use background-clip: text to add depth, masking, blending, or special treatment to supporting visuals.

  • Brand expression

    Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.

Cautions

  • Heavy effects can hurt performance or readability on lower-end devices.
  • Do not use visual effects as the only way to communicate meaning or state.

Accessibility

  • Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
  • Visual polish should never reduce content legibility.

Related links