Home / Snippets / Typography /

Text gradient (background-clip)

Fill text with a gradient using background-clip: text and a transparent color — works in all modern browsers with a solid accessible fallback.

Design Systems

Diagonal Purple to Blue

Modern CSS

Horizontal Teal to Green

2026 & Beyond

Sunset Orange to Pink

Accessible Contrast

Subtle Gold Shimmer

Widely Supported

typographycolorno-js

Quick implementation

.text-gradient {
  /* 1. Set the gradient background */
  background: linear-gradient(135deg, oklch(0.6 0.25 265), oklch(0.6 0.25 310));
  
  /* 2. Clip background to text shape */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* 3. Make text color transparent */
  color: transparent;
}

/* Fallback for older browsers */
@supports not (background-clip: text) {
  .text-gradient {
    color: var(--accent);
  }
}

/* Example: Sunset Gradient */
.text-gradient-sunset {
  background: linear-gradient(90deg, oklch(0.65 0.2 45), oklch(0.65 0.2 350));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Prompt this to your LLM

Includes role, constraints, and framework variants.

Role: Typographic effects specialist.

Goal: Create gradient text using background-clip.

Constraints:
1. Use both -webkit-background-clip and background-clip.
2. Set color: transparent to reveal the gradient.
3. Use oklch() for all color values.
4. Include @supports fallback for unsupported browsers.
5. No JavaScript required.

Variants:
A) Vanilla CSS class (.text-gradient).
B) React component with inline styles or styled-components.

Edge Cases:
1. Print media: force solid color (remove transparency).
2. Windows High Contrast Mode: ensure text remains readable.
3. Fallback color selection for contrast.

Why this matters in 2026

The background-clip: text technique has been widely supported since 2018. It allows designers to break away from flat, solid colors in headings and hero sections. By applying a gradient background to a text element and clipping it to the text shape, we can create vibrant, engaging typography that draws attention without using images or SVGs.

The logic

The logic is straightforward: apply a gradient background to a text element, clip that background to the text shape with background-clip: text, then make the text color transparent to reveal the gradient underneath. The -webkit- prefix is still required for full compatibility across browsers like Chrome and Safari.

Accessibility & performance

Accessibility is generally unaffected; screen readers read the text exactly the same regardless of visual styling. However, in Windows High Contrast Mode, color: transparent can cause text to disappear. The @supports fallback handles older browsers, but for high contrast modes, ensure a solid fallback color is defined or rely on user agent overrides.