The Three Properties

.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Here's what each property does:

PropertyPurpose
backgroundSets the gradient that will show through the text
-webkit-background-clip: textClips the background to the text shape (required prefix)
-webkit-text-fill-color: transparentMakes the text fill transparent so the gradient shows
background-clip: textStandard property (Chrome 87+, Firefox 110+)
⚠️ Always include the -webkit- prefix for background-clip: text. Even modern Chrome requires it for this specific value. Without it the gradient won't show in Safari.

Gradient Examples

/* Purple to pink (popular) */
.grad-1 {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gold/amber */
.grad-2 {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cyan to blue */
.grad-3 {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Rainbow */
.grad-4 {
  background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Animated Gradient Text

.animated-gradient {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
💡 Performance: Animating background-position is GPU-accelerated and performs well. Avoid animating background itself as it triggers repaints.

Fallback for Older Browsers

.gradient-text {
  color: #6366f1; /* solid fallback */
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* If background-clip isn't supported, color: shows instead */
← PreviousHow to Create a Glassmorphism EffectNext →How to Copy Text to Clipboard