Gradient Text Generator

The CSS trick that makes text show a gradient

Text in CSS is normally a solid colour because the color property fills each glyph with one value. A gradient, on the other hand, is a background — it paints a rectangle, not letterforms. The technique behind gradient text bridges the two: you paint a gradient as the element's background, then clip that background to the shape of the text and make the text's own fill transparent so the gradient shows through. Three properties do the work together: background holds the gradient, background-clip: text confines the painted background to the glyph outlines, and -webkit-text-fill-color: transparent (with color: transparent as a fallback) removes the solid letter colour that would otherwise hide the gradient. The result is text that appears filled with a smooth colour transition while remaining real, selectable, searchable text — not an image.

Reading the CSS this tool writes

Every change you make is reflected instantly in both the live preview and the generated CSS below it. A typical output looks like this:

• background: linear-gradient(90deg, #ff6b6b, #feca57); — the gradient itself
• -webkit-background-clip: text; background-clip: text; — clip the paint to the text
• -webkit-text-fill-color: transparent; color: transparent; — let the gradient show
• display: inline-block; — give the element a box the background can fill

The tool emits both the -webkit- prefixed and unprefixed forms of background-clip so the effect works across Chrome, Safari, Firefox, and Edge. You can paste this CSS directly into a stylesheet and attach the gradient-text class to any element.

Linear, radial, and conic — what changes

The gradient type changes how the colours are laid out behind the letters. A linear gradient runs colour along a straight line whose direction you set with the angle slider: 90deg runs left to right, 0deg bottom to top, 45deg on a diagonal. A radial gradient radiates outward from the centre in rings, so the angle has no effect and the tool dims that control. A conic gradient sweeps colours around a centre point like a colour wheel, starting from the angle you specify — striking for short words and logos. You can add between two and four colour stops; with more stops the transitions multiply, letting you build rainbow or sunset effects.

A worked example

Type Hello World, choose a linear gradient, and set the angle to 90. Pick a warm red #ff6b6b for the first stop and a gold #feca57 for the second. The preview shows the phrase fading from red on the left to gold on the right. Now press Animate Gradient. The tool adds background-size: 200% 200% and a keyframe animation that shifts background-position from 0% 50% to 100% 50% and back. Because the painted background is now twice the element's width, sliding its position makes the colours appear to flow continuously through the letters. The speed slider sets the animation duration — a lower number means a faster sweep.

Common mistakes

• Forgetting display: inline-block or a block context. An inline element may not give the background a box to clip against, and the effect can vanish. The generated CSS includes this on purpose.
• Low contrast against the page background. Because the letters are transparent, a pale gradient on a pale page becomes unreadable. Choose stops with enough contrast against where the text will actually sit.
• Relying on it for body text. Gradient text shines on headings, hero titles, and logos. On long paragraphs it hurts legibility and looks busy.
• Skipping a solid fallback for old engines. A browser that ignores background-clip: text would render transparent — invisible — text. For mission-critical text, set a plain color as a fallback before the clip rules so unsupported browsers still show something.

Accessibility and practical use

One real advantage of this approach over exporting a coloured image of your title is that the text stays text: screen readers announce it, search engines index it, and users can select and copy it. Keep the contrast high enough to remain readable, use a heavier font weight so the gradient has more glyph area to fill, and prefer it for short, prominent phrases. Everything here runs locally in your browser — the gradient is rendered live and the CSS is generated on your device, with nothing uploaded — so you can iterate freely and paste the finished rule straight into your own project.