Gradient Text Generator

Type your words, pick the colours and the angle, and copy the CSS that paints a gradient through the text itself. The preview above is filled with the gradient the copy button hands you — the same six declarations, not a picture of them.

Your text

Gradient Text

One line only, and long lines are cut rather than wrapped: a gradient runs across the whole run of text, so a headline that wrapped would paint a second ramp and read as a different design. Keep it short enough to see in full here.

Angle 90°

background: linear-gradient(90deg, #6e5a9b 0%, #0f6e63 100%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;

The SVG is the same gradient as the words above, as vector text rather than as an image: it stays selectable and editable, and it has no background baked in. It names this page's system font stack instead of carrying the glyphs, so on another machine the typeface may resolve to something else and the spacing will follow it. There is no PNG here yet.

Reading the two ends

A gradient has no single contrast ratio — the colour changes across the word. These two figures are what decide whether the ends of your headline are visible, measured against the page. Contrast checker measures a pair in full.

Start #6e5a9b5.84:1 passespasses the large-text threshold
End #0f6e636.12:1 passespasses the large-text threshold

Both ends clear 3:1, the large-text threshold. Large text passes; the same pair at body size would not.

Gradient controls

Angle

Degrees

Colour stops (2 of 8)

Listed in the order they run across the gradient, because that is the order CSS paints them in. The arrows move a stop past its neighbour; a colour at the very start or end has nothing to move past, so its arrow is off.

Every colour field accepts hex, rgb(), hsl() or oklch(). Alpha is not supported; this tool is opaque-only.

Stop 1 colour
Hue
Saturation
Lightness
Position
Stop 2 colour
Hue
Saturation
Lightness
Position

A new stop is added in the widest gap, at the colour the gradient already paints there, so adding one changes nothing until you move or recolour it. Remove is disabled at 2 stops, the fewest a gradient can have.

The CSS you copy is the gradient you see

The words above are not an image of gradient text, and they are not an approximation of it. They are an element carrying the same declarations the copy button hands over: the same gradient value, the same angle, the same stops, in the same order. Both come from one list, so the two cannot drift apart — a change to the technique changes the preview and the copied CSS in the same edit.

That is a checkable claim rather than a slogan, so it is checked as one. The browser suite reads the browser's own computed style back out of the preview element and compares it to the text on the clipboard — the engine's answer, the browser's answer, and the string a reader pastes, held against each other.

Why the CSS is six lines long

The trick is not a single declaration. It is a gradient painted into the element's background, the background clipped to the shape of the glyphs, and the glyphs' own fill made transparent so the background shows through. Each of those needs two spellings, which is why the block is six lines and not three:

The gradient itself. background: linear-gradient(...) — the value the preview is painted with.
The fill, made invisible. color: transparent and, in the engines that have a separate property for it, text-fill-color and -webkit-text-fill-color. An element can have color: transparent and still show letters.
The clipping. background-clip: text and its -webkit- twin. Without both, the gradient fills the whole box instead of the letters — which looks like a bug, and is the most common reason this technique appears not to work.

The prefixed forms are not decoration. The unprefixed spelling is late to arrive, and the prefixed one is what Blink and WebKit still match, so a block carrying only one of them works in a browser nobody is using. This tool emits all three pairs on every copy, and the order does not matter — no two of them set the same property, so there is no cascade to get wrong.

One practical note the CSS cannot fix: keep the words on one line if you can. A gradient runs across the whole run of text, so a headline that wraps paints a second ramp from the top of the second line and reads as a different design. The preview here clips long lines rather than wrapping them, for the same reason.

Colours that survive being letters

A gradient that looks good as a background panel is not automatically good as text, because a background has no contrast requirement and text has a large one — and a gradient has no single contrast ratio at all, since the colour changes across the word. The light end of a ramp that works as a fill disappears on a light page.

So this tool opens on two dark brand colours, chosen so both ends are readable against the page rather than picked for looking cheerful, and it tells you where to check the pair: the contrast checker measures two colours, and the first and last stops are the two that decide whether the ends of your headline are visible. Gradient text is decorative by convention — which is why this site never uses it for anything you have to read.

Taking it away: CSS, or an SVG

The copy button hands over six CSS declarations, which is what you want if the headline is going into a web page. Beside it there is now a second control that copies the same gradient as an SVG document, for the times you want a file instead — to drop into a design tool, or to keep somewhere the words can still be edited.

The two come from the same gradient. Nothing about the SVG is a picture of the preview or a second set of colours: it is built from the same stops, in the same order, at the same angle, and the gradient is painted into the glyphs by SVG itself rather than by a background trick that happens to work in one browser.

What the SVG cannot promise is the typeface. It names the same system font stack this page is painted with — the browser's own monospace, whatever that is on your machine — rather than embedding a font file. That keeps the file small and free of third-party requests, and it is why the words in it stay words: selectable, searchable and editable in any program that opens it. The cost is honest and worth stating plainly: open the file on a machine that resolves a different monospace, and the glyphs will be a different shape and the spacing will follow them. Outlining the letters would freeze the appearance, and would also throw away everything that makes an SVG worth having over a flat image.

The file is generated in your browser from the gradient on screen, exactly as the CSS is. Nothing is uploaded, and no server is involved.

What this tool does not do

Linear gradients only. Radial and conic gradients are different tools, and neither is half-built here. The gradient generator builds the background versions.
No font picker, no size slider, no animation. All three are one line of CSS you already know, and none of them change what a gradient text *is*. Adding them would make the copy button slower to reach and no more correct.
No PNG export. You get the CSS and, if you want a file, an SVG you can copy. An SVG keeps the words as words, which a raster cannot — but it names a font rather than carrying one, so it is not a picture of your headline either.
No transparency. Every stop is opaque, as everywhere else on this site.
Eight stops. A text gradient needing more handles than that is usually a background image pretending to be text.

Where to go next

If what you actually want is the gradient itself — a panel, a card, a background — the gradient generator builds it and explains the stop-ordering rules this page quietly relies on.

Gradient colours usually come from somewhere. The palette from image gives you a whole set worth building a ramp from, and the harmony generator computes colours that belong together from one you already have. The color converter moves any of them into another format.