Gradient text

Generate CSS for gradient text effects.

Angle90° Size56px

GRADIENT

Gradient headlines turn up on nearly every product landing page, and the temptation is to export the words as an image. That costs you selectable text, searchable content and anything a screen reader would have read out.

The effect is only three CSS declarations, and this generator writes them for you. Enter your text, pick two colours and an angle, and the preview shows the result on live text you can still select.

How it works

How the effect works

The trick is not a text colour at all. A gradient is painted as the element's background, background-clip: text confines that background to the shape of the glyphs, and color: transparent removes the normal text fill so the clipped background shows through. The text stays real text throughout — selectable, searchable and readable by assistive technology.

Using what you copy

The Text field, Size slider and bold preview weight exist so you can judge the result; they are not part of the copied CSS. What you get is a reusable class:

.gradient-text {
  background: linear-gradient(90deg, #1a56db, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Paste it into your stylesheet, add class="gradient-text" to a heading, and set the font size and weight there as you normally would. Keep both clip lines — the unprefixed property is supported across current browsers, but the -webkit- line is what keeps older Safari working.

Where it goes wrong

The effect is worth reserving for large, heavy text. A gradient across small body copy compresses into something that just reads as a muddy colour, and the lighter end of the gradient often fails contrast requirements against the page background — check the pale end, not the average.

One risk is worth guarding against: if background-clip fails for any reason, color: transparent still applies and the text disappears entirely. Declaring an ordinary colour first and only overriding it where support exists avoids that:

.gradient-text { color: #1a56db; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text { background: linear-gradient(90deg, #1a56db, #ec4899);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}

Terms explained

background-clip: A CSS property that limits how far the background is painted. Set to `text`, the background is clipped to the letterforms instead of filling the box.
color: transparent: Removes the solid fill the text would normally be drawn in, letting the clipped background show through. Without it, the gradient stays hidden behind the letters.
linear-gradient(): The function that fades between colours along a line. It counts as a background image, which is what makes it clippable to text.
Gradient angle: The direction of the fade in degrees. 0 runs upward and 90 runs left to right, increasing clockwise.
-webkit- prefix: A vendor-prefixed version of a property kept for older browsers. Here it is what makes the effect work in earlier Safari releases.
@supports: A CSS rule that applies styles only when the browser understands a given declaration — the safe way to switch on effects that need a fallback.

Frequently asked questions

My text disappeared completely after applying the CSS. What happened?

`color: transparent` is applying while the gradient is not. Usually the `background` line was left out, the background was overridden by a later rule, or the element has no background to clip. Setting a normal colour first and wrapping the gradient in an `@supports` block prevents invisible text in every case.

Does gradient text hurt SEO or screen readers?

No. The text remains ordinary text in the HTML, so search engines index it and screen readers announce it exactly as they would any heading. That is the main advantage over exporting the headline as an image.

Can I use more than two colours?

Yes. The generator outputs two stops, but you can add more inside the parentheses after copying — `linear-gradient(90deg, #1a56db, #7c3aed, #ec4899)` works, and each stop can be pinned with a percentage.

The gradient looks different on a two-line heading. Why?

The gradient is sized to the element, not to each line, so a heading that wraps spreads the same fade over a taller box and each line receives only part of it. Setting the element to `display: inline` or `inline-block` so it hugs the text usually gives the result people expect.

Will this work in an HTML email?

Treat it as unreliable. Several email clients strip or ignore `background-clip`, and the transparent fill can leave the text unreadable. For email, use a solid colour or an image with proper alt text.