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
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