Gradient text in CSS, done well

Gradient text in CSS is made by painting a gradient as the background of the text element, clipping that background to the letter shapes with background-clip: text, and making the text itself transparent so the gradient shows through. It takes three declarations, works in every current browser, and stays real, selectable, searchable text rather than an image.

.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The rest of this guide covers what the three-line version gets wrong: missing fallbacks, contrast, multi-line text, clipped descenders, and the design question of when gradient text helps at all. For the look of gradient lettering in social and brand work rather than on the web, see text effects.

A robust gradient text recipe with fallbacks

If a browser applies color: transparent but not the clip, the text disappears. Guard against it: give the element a solid colour taken from the gradient, then switch to the transparent version only when the browser confirms support. Add a reset for forced colours mode, where the system replaces your colours and the text must stay visible.

.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}

The MDN page on background-clip documents the text value and its current support.

Contrast: check both ends of the gradient

A contrast checker takes one text colour, but gradient text has many. The words are only as readable as their weakest part, so check the lightest stop and the darkest stop against the background, and look at the middle too, because an sRGB blend can dip lighter or duller than either end. For large display text, WCAG asks for at least 3:1; for normal text, 4.5:1. Colour contrast explains the ratios.

Fixing multi-line gradient text and clipped letters

On an inline element that wraps, the browser lays one background across all the lines as if they were a single strip, so the first line gets the start of the gradient and the last line gets the end. Usually you want each line to carry the full gradient. box-decoration-break: clone does that. On block elements, such as a heading, the gradient already spans the whole box, so a long gradient across a wide heading may show only its middle on short lines.

.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}

Clipped descenders are the other surprise. The background only paints the element's box, so with a very tight line-height, the parts of letters that hang below it are left transparent and vanish. A line height of about 1.1 or a little bottom padding fixes it. Italic display faces can lose the tip of their last letter on the right for the same reason; a touch of inline padding helps.

When gradient text works, and when it does not

A good rule: gradient text is an accent, like italics. One highlighted word in a headline draws the eye; a whole paragraph of it tires it. Heavy weights help, because thin strokes do not show enough colour to read as a gradient. If the rest of the page already uses gradient backgrounds, flat type is usually the stronger choice; text on gradient backgrounds covers that case.

Animating gradient text

To make colour flow through the letters, make the background larger than the text and move it. Size it at 200% wide and animate background-position back and forth with alternate, so there is never a jump where the loop restarts. Respect reduced motion settings, and keep it slow: a shimmer every few seconds reads as polish, a fast cycle reads as a warning.

.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}

The same background tricks power animated gradients in CSS more broadly, and gradient outlines rather than fills are covered in CSS gradient borders.