BYTETOOLS

Gradient Text Generator

Create gradient text in CSS with background-clip, an animated shimmer option, a solid-colour fallback and a live contrast check on light or dark backgrounds.

Gradient headline

Text and gradient

Colour stops (3)
Stop 1
Stop 2
Stop 3
90
56
800

Fallback and contrast

Browsers without background-clip: text fall back to #c4557a, the average of your stops. Against a light background, the weakest stop has a contrast ratio of 2.15:1.

#7c3aed#db2777#f59e0b

CSS

.gradient-text {
  color: #c4557a;
  background-image: linear-gradient(90deg, #7c3aed, #db2777, #f59e0b);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 56px;
  font-weight: 800;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .gradient-text {
    -webkit-text-fill-color: #c4557a;
  }
}

HTML

<h1 class="gradient-text">Gradient headline</h1>

At least one stop falls below the 4.5:1 WCAG AA ratio for body text on this background (2.15:1). Large display headings only need 3:1, so a big gradient headline is usually fine — but do not use this treatment for paragraph text. Also note that -webkit-text-fill-color: transparent makes the text invisible in Windows High Contrast Mode, so keep the real text in the markup and never bake it into an image.

What is the Gradient Text Generator?

Gradient headlines are a three-line CSS recipe: paint a gradient as the background image, clip it to the shape of the glyphs, then make the text fill transparent so the gradient shows through.

  • Two to eight colour stops with an angle control
  • Optional animated shimmer with a keyframes block
  • Solid fallback colour written first so it survives
  • @supports block for browsers without background-clip
  • Light and dark preview with a contrast read-out
  • Copyable CSS and HTML, with the text properly escaped

How to use the Gradient Text Generator

  1. 1

    Type your headline into the text field.

  2. 2

    Add, remove and recolour the gradient stops, then set the angle.

  3. 3

    Adjust font size and weight, and switch on the animated shimmer if you want one.

  4. 4

    Toggle the dark background preview and read the contrast figure below it.

  5. 5

    Copy the CSS and the matching HTML snippet.

About the Gradient Text Generator

Gradient headlines are a three-line CSS recipe: paint a gradient as the background image, clip it to the shape of the glyphs, then make the text fill transparent so the gradient shows through. Getting the order and the vendor prefixes right is the fiddly part, and that is what this generator handles.

Add as many colour stops as you like, set the angle, size and weight, and optionally turn on a shimmer that slides the gradient across the letters using a keyframes block. The preview updates as you type, and you can flip the background between light and dark to see how the treatment holds up.

The tool also works out a solid fallback by averaging your stops and writes it as the plain colour declaration first, so browsers that do not support background clipping still show readable text. It runs entirely in your browser with nothing uploaded.

Frequently asked questions

How do I make gradient text in CSS?

Set a linear-gradient as the element's background-image, add background-clip: text with the -webkit- prefixed version beside it, then set -webkit-text-fill-color to transparent. The gradient then shows only inside the letterforms. This tool writes all of it including the fallback.

Why is my gradient text invisible?

Usually because the transparent text fill applied but the background clipping did not, leaving nothing to see. Check that background-image is set on the same element as the clip, and that the element is not display: inline inside a block that has its own background.

Does gradient text hurt accessibility?

It can. Screen readers are fine because the text is still real text, but the gradient means parts of the word will have less contrast than others, and Windows High Contrast Mode can render transparent-filled text as invisible. Keep it for large headings and always ship the solid fallback this tool generates.

How do I animate gradient text?

Make the background wider than the element with background-size: 200% auto, then animate background-position across it. That is exactly what the shimmer option produces here, along with the keyframes block you need to paste alongside the rule.

Which browsers support background-clip: text?

All current browsers support it, though Chrome and Safari still want the -webkit- prefixed property alongside the standard one. The @supports block in the generated CSS restores a solid colour anywhere neither is understood, so nothing disappears.

Related tools