DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

CSS Gradient Text That Actually Works Cross-Browser

#webdev #css #tutorial #design

Gradient text -- where colors flow across letterforms -- is one of those CSS effects that looks impressive but has a non-obvious implementation. You cannot just apply a gradient to the color property. CSS gradients are background images, and getting them to clip to text requires a specific combination of properties that is not immediately intuitive.

The technique 

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Here is what each line does:

background: linear-gradient(...) creates a gradient background on the element. At this point, the gradient is behind the text, not on it.

background-clip: text clips the background to only be visible within the text shapes. The gradient now fills the text glyphs. The -webkit- prefix is still needed for Safari and older Chrome versions.

-webkit-text-fill-color: transparent makes the text fill transparent so the clipped background shows through. Using this property instead of just color: transparent ensures consistent behavior across WebKit-based browsers.

color: transparent serves as a fallback and handles non-WebKit browsers.

Common mistakes

Forgetting the fallback. If background-clip: text is not supported, the text becomes transparent with no gradient visible -- completely invisible. Always provide a fallback color:

.gradient-text {
  color: #667eea; /* Fallback for unsupported browsers */
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

In browsers that do not support background-clip: text, the text renders in the fallback color with the gradient visible behind it as a normal background. Not perfect, but readable.

Using it on small text. Gradient effects on 14px body text are subtle to the point of being invisible and can reduce readability. Reserve gradient text for headings at 24px or larger where the color transition is visible and the reduced contrast does not impair reading.

Too many color stops. A gradient with five colors across a short heading creates visual noise. Two to three colors across a generous text width produces the cleanest result.

Gradient angles and directions

The angle parameter controls the gradient direction:

  • 90deg or to right: horizontal flow
  • 180deg or to bottom: vertical flow
  • 45deg: diagonal
  • 135deg: opposite diagonal

For text, horizontal gradients (90deg) are the most natural because they follow the reading direction. Vertical gradients work well for short, stacked headings.

Animated gradient text

You can animate the gradient by animating the background position:

.animated-gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
Enter fullscreen mode Exit fullscreen mode

The trick is making the background wider than the element (300%) and shifting its position. The repeating final color (same as the first) creates a seamless loop.

Use animation sparingly. A constantly shifting rainbow heading is distracting. A subtle two-color shift on hover can be elegant.

Radial and conic gradient text

Linear gradients are not the only option:

/* Radial gradient text */
.radial-text {
  background: radial-gradient(circle, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Conic gradient text */
.conic-text {
  background: conic-gradient(#667eea, #764ba2, #f093fb, #667eea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Radial gradients produce a spotlight effect that works well for centered headings. Conic gradients create a color wheel effect that is more novelty than practical for most text.

I built a gradient text generator at zovo.one/free-tools/gradient-text-generator that lets you pick colors, adjust the angle, preview the effect on your own text, and copy the exact CSS. Getting gradient text right is mostly about finding the right color combination, and live preview makes that process fast.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)