CSS gradient text generator

Fill headings with a gradient using background-clip: text — with a solid fallback colour so the text never vanishes, and OKLCH blending for clean midpoints.

Gradient headline

#d6007a
#ff7a00
Page background
.gradient-text {
  color: #d6007a; /* fallback */
  background: linear-gradient(90deg, #d6007a 0%, #dc1273 8.3%, #e21e6b 16.7%, #e72963 25%, #ec325b 33.3%, #f03c53 41.7%, #f4454b 50%, #f74e42 58.3%, #fa5739 66.7%, #fc602f 75%, #fd6823 83.3%, #fe7115 91.7%, #ff7a00 100%);
  background: linear-gradient(in oklch 90deg, #d6007a 0%, #ff7a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 64px;
  font-weight: 800;
}
Check contrast

Why the fallback matters

Gradient text relies on -webkit-text-fill-color: transparent to reveal the background through the letters. If the gradient fails to load — a typo, an old browser, a forced-colours mode like Windows High Contrast — transparent text is invisible. Declaring a solid color first means the worst case is plain coloured text. The generated code also includes a pre-blended background line for browsers that don’t understand in oklch.

Keep gradient text for large display type. At body sizes the colour change across a few letters is barely visible and makes contrast harder to guarantee.

Questions

How do I make gradient text in CSS?

Set the gradient as the background, clip the background to the text and make the text fill transparent: background: linear-gradient(…); -webkit-background-clip: text; background-clip: text; color: transparent. The -webkit- prefix is still needed for some Safari versions.

Is gradient text accessible?

Screen readers read it normally because it is real text. The risk is contrast: check the lightest and darkest parts of the gradient against the page background — this tool shows the worst ratio. Always set a solid color first so the text stays visible if background-clip is unsupported.

Why does my gradient text disappear?

Usually because background-clip: text is not applied (missing -webkit- prefix) while color is transparent, or because the element is display: inline and the background is sized to one line. Use display: inline-block or box-decoration-break: clone for multi-line text.

Can I animate gradient text?

Yes: make the background larger than the text (background-size: 200% auto) and animate background-position. The animated gradient generator writes the keyframes for you.