Developer Tools New Tool

Free Online CSS Text Gradient Generator with background-clip

Fill type with a gradient using background-clip: text. Choose linear, radial or conic, edit the stops and the angle, and turn on an animated variant that moves the gradient across the words. The output carries the WebKit properties that are still required and a solid colour fallback for browsers without support.

Free Forever Nothing Uploaded Real type in the preview Runs in your browser

Free Online CSS Text Gradient Generator with background-clip

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Text Gradient Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Gradient type

This is real type with the generated rule applied. Try selecting the words with the mouse to see what a selection highlight does to gradient text.

CSS

Type Sample text Size px Weight

Gradient Kind Angle 90deg

Animation and naming Move the gradient Cycle ms Class name

Gradient text disappears in Windows High Contrast Mode, so never let it be the only way a word is readable.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Fill Text with a Gradient in CSS

A few steps, and nothing is uploaded.

Set the type Enter the sample text, then a font size and weight. Gradient text needs weight to work: at 400 and a small size there is not enough ink on the screen for the gradient to be visible at all, so the preview starts heavy.

Build the gradient Choose linear, radial or conic, set the angle for a linear one, then add colour stops and drag each into position. Two stops is the common case, three is often nicer, and past five the effect usually turns muddy.

Animate it if you want The animated variant widens the background and moves its position, so the gradient travels across the words. The generated rule also stops the animation under prefers-reduced-motion, which is not optional for anything that loops.

Copy the rule The output carries the standard properties, the WebKit ones that are still required, the keyframes if you animated it, and an @supports block that falls back to a solid colour where background-clip on text is not supported.

What to Know About Gradient Text

Including where it disappears, and why it needs a fallback.

Gradient text is invisible to a selection highlight and to Windows High Contrast Mode, so it must never be the only way a word is readable. The technique works by making the text itself transparent and letting a background show through the glyph shapes, which means there is no text colour left for anything else to override. Select the words with a mouse and the highlight paints behind glyphs that have no fill, so the text vanishes into the highlight. Turn on a forced colours mode and the browser replaces your background but keeps the transparent fill, and the heading disappears entirely. Use it for a decorative headline whose words also exist elsewhere on the page, never for body text, a label, a link, a button or anything a reader has to be able to find.

The WebKit properties are still required, not historical. background-clip: text is standard now and supported everywhere, but Safari and older Chrome still need -webkit-background-clip: text, and the transparent fill is only reliable through -webkit-text-fill-color: transparent rather than color: transparent, because -webkit-text-fill-color wins over color wherever it is understood. The generated rule writes all four properties, which looks redundant and is not. Dropping the prefixed pair is the usual reason gradient text works in one browser and shows a block of solid colour in another.

The @supports fallback makes the failure harmless. The output ends with @supports not ((background-clip: text) or (-webkit-background-clip: text)), and inside it the text is given your first stop colour as a normal color with -webkit-text-fill-color: currentColor. A browser that cannot clip the background to the glyphs then shows solid coloured text instead of transparent text on a coloured box. Keep that block: it is three lines, and without it an unsupported browser can render a heading as an unreadable rectangle.

This page styles one run of text and does not check contrast. There is no shadow, stroke or outline on the gradient text, no per word or per letter gradient, no background image instead of a gradient, and no way to read an existing rule back into the controls. Contrast is the real gap: a gradient runs through several colours, so a checker that compares one colour against the background tells you very little, and the pale end of a gradient is often the part that fails.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Real type The preview is live text with the generated rule applied.

Stops you control Linear, radial or conic, with stops you add, move and remove.

An animated variant The gradient travels across the words, with reduced motion handled.

The prefixed pair WebKit background-clip and text-fill-color, both still needed.

A real fallback An @supports block that shows solid colour instead of nothing.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Text Gradient Generator

Gradient text is a small trick with a sharp edge. The element gets a gradient as its background, the background is clipped to the shape of the glyphs, and the text fill is set to transparent so the gradient shows through. Four properties and it is done. What makes it worth a tool is that two of those properties are still vendor prefixed, and that the failure mode, when they are missing or unsupported, is a solid coloured box with invisible writing on it.

So the output here is deliberately longer than the snippet most people paste. It writes the standard background-clip and color alongside -webkit-background-clip and -webkit-text-fill-color, because Safari needs the prefixed clip and the prefixed fill colour beats color wherever it is understood. Then it adds an @supports block that puts a solid colour back for anything that cannot do the clip at all.

The preview is real type rather than an image of type, which matters more here than for most effects. Gradient text depends on how much ink is actually on the screen: the same gradient across a 900 weight display size looks rich and across a 400 weight paragraph looks like a smudge. Being able to change the size, the weight and the words and watch the result is the only reliable way to judge it, and selecting the text in the preview shows you the highlight problem straight away.

Frequently Asked Questions

The WebKit properties, selection, contrast and animation.

Yes. -webkit-background-clip: text is still required by Safari and older Chrome, and -webkit-text-fill-color: transparent is the reliable way to clear the fill, because it takes precedence over color in every engine that supports it. Write the standard properties too, in this order, and you are covered both now and when the prefixed pair eventually stops being needed.

Because the glyphs have no fill of their own. The selection highlight paints its own background behind the text, and since the text is transparent there is nothing left to see against it. There is no clean fix, only mitigation: you can set ::selection colours on the element, but the honest answer is to keep gradient text decorative rather than something a reader needs to copy.

Forced colours modes replace your backgrounds and borders but leave the transparent text fill alone, so the heading disappears. That is why the generated CSS includes an @supports fallback and why the notes insist gradient text should never carry information on its own. If a heading matters, make sure the same words appear in the page title, a landmark or the surrounding text.

The background is made wider than the element, usually 300 per cent, and the animation moves background-position across it in a loop, so the part of the gradient showing through the glyphs keeps changing. The keyframes are generated with your class name. The rule also disables the animation under prefers-reduced-motion: reduce, which any looping animation should do.

No, and not because of taste. Gradient text cannot be selected clearly, disappears in forced colours modes, and has no single colour to measure contrast against, which makes it impossible to prove readable. Keep it to one display heading or a short marketing line, and set everything a person has to actually read in a plain colour.