Gradient Text Generator

How gradient text actually works

CSS has no text-gradient property. The effect is three declarations working together: you paint a gradient as the element’s background, clip that background to the shape of the glyphs with background-clip: text, and then make the text’s own fill transparent so the clipped background shows through.

.gradient-text {
  background-image: linear-gradient(90deg, #FF6B6B 0%, #556270 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Keep both the prefixed and unprefixed background-clip — Safari still needs -webkit-. Use -webkit-text-fill-color: transparent rather than color: transparent, because it lets you keep a real color value as the fallback for any browser that ignores the clip.

Four things that break gradient headlines

No fallback color. If background-clip: text fails and you set color: transparent, the headline disappears completely. Set color to a solid tone from your gradient — the generator writes this line for you — so the worst case is a flat headline, not a blank one.

Wrapping across lines. The gradient is sized to the element box, so a headline that wraps onto three lines stretches the gradient across all three. That’s usually what you want. If you’d rather each line run the full gradient, set display: inline on a <span> per line, or use box-decoration-break: clone.

Contrast you never checked. Clipped text is still text, and it still has to be readable. A gradient has a weakest point, and that point is what a reader with low vision sees. The generator reports the worst-case ratio across all your stops: display type needs 3:1, anything at body size needs 4.5:1.

Animating the wrong property. Animating background-position on a background sized to 200% auto is cheap and smooth. Animating the color stops themselves forces a repaint every frame. Wrap the animation in prefers-reduced-motion: reduce either way.

When to export an image instead

Live CSS is the right answer for a web headline — it stays sharp, it’s selectable, it’s indexable. Reach for the exports when the text is leaving the browser:

• SVG for anything that will be scaled or printed — a logotype, a slide title, a press asset. Keep in mind the SVG references the font by name, so the machine opening it needs that font, or you convert the text to outlines in your editor first.
• PNG for social cards, email headers, and app store screenshots, where CSS can’t follow. Exports render at 2× for retina screens.

Picking colors that survive the clip

Thin strokes eat gradients. A 900-weight display face at 96px gives the gradient room to travel; a 300-weight face at 18px shows maybe two of your stops and reads as a muddy average. As a rule: the lighter and smaller the type, the fewer stops and the tighter the hue range.

Analogous gradients — neighbors on the color wheel — hold up best on type. Complementary pairs pass through a desaturated middle that looks grey at small sizes. All 504 gradients in the library work as text gradients, but the two-stop brand sets in the Brands collection are the safest starting point.

Frequently asked questions

Does gradient text work in every browser?

Chrome, Edge, Safari, Firefox and Opera all support background-clip: text in current versions. Firefox added unprefixed support in version 49. The fallback color covers anything older.

Is gradient text bad for SEO?

No. The text stays real text in the DOM — crawlers, screen readers and find-on-page all treat it normally. That’s the main reason to use CSS rather than exporting an image of your headline.

Can screen readers read gradient text?

Yes. background-clip and -webkit-text-fill-color are purely visual; the accessibility tree is untouched. Contrast is the real accessibility question, which is why the generator shows the worst-case ratio.

How do I use this with Tailwind?

Switch the output to the Tailwind tab. For two- and three-stop linear gradients you get bg-gradient-to-* with from-, via- and to- arbitrary values. Anything more complex comes out as a single arbitrary bg-[...] value. Animated gradients also need a keyframes entry in tailwind.config.js — the generator appends it as a comment.

Why does my gradient text look flat?

Almost always too little type. Increase the size or weight, or reduce the number of stops. A gradient needs distance to be visible, and glyph strokes are narrow.

Can I animate a gradient headline?

Yes — tick “Animate the gradient”. It sets background-size: 200% auto and slides background-position, which stays on the compositor. The generated CSS includes a prefers-reduced-motion block that stops the animation for users who ask for less motion.

More gradient tools

• Gradient Generator — start from a plain background gradient
• Animated Gradient Generator — for animated backgrounds rather than text
• Glassmorphism Builder — pair gradient headlines with a glass card