CSS Gradient Text — How to Apply a Gradient to Text in CSS

Updated: May 2026

Gradient text is one of the most sought-after typographic effects in modern web design. Achieved with a three-property CSS trick, it works in every major browser without JavaScript, Canvas, or SVG — just clean, copy-pasteable CSS.

Generate your gradient →

Free · No upload · In your browser

Live examples

Gradient Heading

Sunset Title

Ocean Words

The three-property technique

CSS does not have a direct color: gradient(...) property. Instead, you set the gradient as a background and then clip it to the text shape:

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

The three properties work together: background paints the gradient behind the element, background-clip: text masks the background to the shape of the text glyphs, and -webkit-text-fill-color: transparent makes the default text color invisible so the gradient shows through.

Always include both -webkit-background-clip: text and the unprefixed background-clip: text. Safari still requires the prefixed version, while Firefox and Chrome both support the unprefixed form. Without the -webkit- line the effect breaks in Safari.

Step-by-step with the Flowfiles generator

Open the CSS Gradient Generator and build your gradient. Adjust color stops, angle, and type until the preview matches your design.
Click Copy to copy the generated background line.
In your stylesheet, create a class for the text element and paste the background line.
Add the three clipping properties below the background line.
Apply the class to your heading or paragraph element.

/* Result */
.hero-title {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Optional: improve rendering */
  display: inline-block;
}

Why use display: inline-block

Block-level elements (like <h1>) stretch the background to full width. If your gradient goes from left to right, the colors will be spread across the full container width, not just the text width. Adding display: inline-block shrinks the background box to fit the text, so the gradient runs from the first letter to the last.

On multi-line text, remove display: inline-block — the gradient will then span all lines naturally, which is usually the desired effect for paragraph text.

Hover animation

Since the gradient itself cannot be transitioned, animate the background-position on a wider-than-100% gradient:

.animated-text {
  background: linear-gradient(90deg, #667eea, #764ba2, #f5576c, #667eea);
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background-position 0.6s ease;
}
.animated-text:hover {
  background-position: 100% 50%;
}

The background-size: 300% 100% makes the gradient three times wider than the element. Moving background-position from 0% to 100% shifts the visible window across the gradient, creating a smooth color-shift animation on hover.

Accessibility considerations

Check contrast: the lightest color in the gradient must still meet WCAG AA contrast against the background. A gradient from light yellow to white on a white page fails accessibility checks.
The color property still controls text selection color. Add color: transparent as a fallback for older browsers that ignore -webkit-text-fill-color.
Screen readers read the text normally — the CSS effect is purely visual and does not affect accessibility.
Add a print stylesheet that reverts -webkit-text-fill-color to a solid color, since gradient text often renders poorly when printed.

Frequently asked questions

Why is my gradient text not showing in Safari?

Safari requires the -webkit-prefixed version of background-clip. Make sure your CSS includes -webkit-background-clip: text in addition to the unprefixed background-clip: text. Also verify that -webkit-text-fill-color: transparent is present — without it, Safari shows solid text color over the gradient.

Does CSS gradient text work on links?

Yes, but you may need to reset the link color explicitly: set color: transparent on the anchor element so the default link color does not show through. The gradient effect still applies correctly.

Can I apply a gradient to text in an SVG?

In SVG, text gradient is handled differently: define a <linearGradient> element and reference it with fill="url(#myGradient)". This is separate from the CSS technique and is not affected by background-clip.

How do I make the gradient follow the text width, not the container?

Add display: inline-block to the element. This makes the background box fit the text width instead of stretching to the full container, so the gradient runs precisely from the first to the last character.