How does gradient text work in CSS?

The gradient is set as a background image on the text element, the background is clipped to the letterforms with background-clip set to text, and the text colour is made transparent so the clipped background shows through. Without the transparent fill the letters paint over the gradient and nothing appears to change.

Why does the generated CSS include a plain colour as well?

Because the clip property is not universally available and a transparent fill with no clipping paints an invisible heading. The plain colour is declared first, so an engine that cannot clip renders solid text, and a support query then replaces it with the transparent fill only where clipping works.

Why does selected gradient text disappear?

Because the fill is transparent, so the browser's selection highlight covers a colour that is not being painted, and inverting nothing leaves nothing. Declaring a background colour for the selection pseudo-element restores a visible highlight, which is why the generated block includes that rule rather than leaving it to chance.

What is the worst stop contrast and why not average it?

It is the contrast ratio of the palest stop against the surface, and it is the number a reader meets at the thin end of the ramp. Averaging the stops would hide exactly the failure that matters, since a gradient with three dark stops and one very light one still has a legibility problem where the light one lands.

Is the contrast check valid over an image?

No. The calculation assumes a flat white surface, so it describes text on a plain background only. Over a photograph the ratio changes with every pixel behind the letters, and the practical fix is a scrim or a solid panel rather than a different gradient.

Text Gradient Maker

Gradient

TextStop count

FromViaTo

Angledeg

Sizepx

Fallback colour

Gradientlinear-gradient(90deg, #6366f1, #f59e0b)

Worst stop contrast on white2.15:1

AA large text (3:1)fails at the lightest stop

Preview

Gradient headline

Selection colour is set explicitly above: without it, selected gradient text can become invisible because the fill is transparent.

css output

.gradient-text {
  background-image: linear-gradient(90deg, #6366f1, #f59e0b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* fallback for engines without background-clip: text */
  color: #6366f1;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text { color: transparent; }
}

.gradient-text::selection { background: #6366f1; color: #fff; }

You Might Also Need

Outlined Text Generator

Generate outlined text

Text Shadow Builder

Design CSS text shadows

Neon Text Previewer

Preview neon glow text

3D Text Effect Preview

Preview 3D text effects

The text gradient maker builds gradient text the way CSS actually does it — a background image clipped to the letterforms with a transparent fill — and reports the contrast of the worst stop against the page. It also writes the fallback and the selection rule that gradient text needs.

What is Text Gradient Maker?

The text gradient maker assembles the three declarations that gradient text is made of, plus the two that keep it from failing: a background image, background-clip set to text, a transparent colour, a plain fallback colour and an explicit selection background.

The controls map onto the stops and the geometry of the ramp.

Two or three stops, chosen by a stop-count control, with a colour picker for each: from, an optional midpoint, and to.
An angle from 0 to 360 degrees, which decides the direction the ramp runs across the text.
A size from 18 to 140 pixels, since gradient text is a display treatment and rarely suits body copy.
A fallback colour, used by engines that cannot clip a background to text.

The generated block is worth reading line by line, because each part answers a specific failure. The clip property paints the ramp only where the letters are; the transparent colour lets the ramp show through; the plain colour before it means an engine without support paints solid text rather than nothing, and a support query then restores the transparent fill where clipping is available. The selection rule sets a background for highlighted text, which is the failure nobody notices until a reader drags across the heading and the text disappears because its fill is transparent.

The contrast half is the part that separates this from a colour picker. The tool converts each stop to a relative luminance and returns the contrast ratio of the worst stop against the surface, along with whether that ratio clears the three-to-one threshold for large text. Since a gradient's lightest stop is what a reader struggles with, the worst stop is the number that matters, and it is reported rather than averaged. The honest caveat is that the calculation assumes a white page background and evaluates the stops rather than the blended pixels between them: a two-stop ramp passes through intermediate colours, and one of those can be lighter than either endpoint. Where the treatment is used over an image or a photograph, the ratio here no longer describes what a reader sees.

Five further limits shape where the treatment is safe to use.

The mid-stop control only appears in three-stop mode, so a two-stop ramp has no way to bias its own midpoint.
Both modes emit a linear gradient, so the stop-count control chooses how many colours the ramp passes through rather than the kind of ramp it is.
Nothing measures the gradient across multiple lines, and a ramp that reads well on one line can leave the last line of a wrapped heading entirely in its palest colour.
The worst stop contrast is evaluated at the stops rather than between them, so a blend that passes through a lighter colour than either endpoint can still fail on screen.
The fallback colour is a single value, so an engine without clipping gets flat text in the one colour chosen rather than an approximation of the ramp.

Treat the effect as a display treatment for one or two lines, and keep the fallback colour close to the darkest stop so the unclipped version still reads.

How to use Text Gradient Maker

Enter the words and set the size, remembering that gradient fills suit display type rather than paragraphs.
Choose two or three stops and an angle, watching the ramp in the preview rather than picking colours in the abstract.
Read the worst stop contrast and the large-text verdict, and darken the lightest stop until it clears the threshold you need.
Copy the CSS with the fallback colour and the selection rule intact, since both exist to cover a specific failure.

When to use Text Gradient Maker vs related tools

Reach for it when a display heading wants colour that varies across the letters, when gradient text has already failed in one of the three predictable ways — no clip support, an invisible selection or a stop that is too light to read — or when the contrast of a gradient has to be checked rather than eyeballed. The worst-stop number is the one to quote. For flat coloured text the contrast pairing checker is the dedicated check, the outlined text generator and the shadow text generator cover the other display treatments, and the type scale generator supplies the display sizes the effect is used at.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.