Your files never leave your device. All processing happens locally in your browser.
How do I make gradient text with CSS?
The Gradient Text Generator builds the real CSS visually — type your text, pick a linear, radial or conic gradient, add colour stops with positions, tune the type (size, weight, style, spacing, alignment, local font), then copy a ready-to-paste rule that sets a gradient background-image and clips it into the glyphs with background-clip: text (color: transparent). It emits the -webkit- prefix Safari and older Chromium need plus a solid color fallback, shows a live preview and an honest WCAG contrast estimate, and runs 100% in your browser — nothing is uploaded.
The core trick: a gradient background + background-clip: text + transparent text fill
Linear, radial and conic gradients (and repeating variants), up to 8 colour stops
Always emits -webkit-background-clip: text and a solid color fallback for older engines
Live worst-case WCAG contrast check (samples the lightest and darkest stops)
100% client-side — text, colours and values never leave your browser
What is
CSS gradient text (background-clip: text)
Gradient text is a CSS technique where a gradient is painted as an element’s background-image and then clipped to the shape of its text with background-clip: text (with the -webkit-background-clip: text prefix for Safari and older Chromium), while the text’s own fill is made transparent (-webkit-text-fill-color: transparent or color: transparent) so the gradient shows through the glyphs. The gradient can be linear, radial or conic, and a solid color fallback keeps the text readable in engines that lack background-clip: text support.
Yes. Your text, colour stops and slider values are serialised into a CSS rule entirely on your device — nothing is uploaded, and there is no server or CDN in the processing path.
Everything is 100% client-side. The tool holds the design as typed state — the text, the gradient type and stops, and the type settings — and a pure engine serialises the exact background-image gradient plus the background-clip: text rule right in your browser tab. The live preview is clipped by your own browser; no input is ever sent to a server, and there is no CDN in the processing path. It works offline once cached, and closing the tab discards your work.
Every modern browser supports it, but Safari and Chromium 119 and earlier still need the -webkit-background-clip: text prefix, so this tool always emits both plus a solid color fallback.
background-clip: text ships in all current engines, and Chromium dropped the prefix in Chrome 120. However Safari, Chromium ≤119 and Samsung Internet ≤24 still require the -webkit-background-clip: text prefix, so the generated CSS always includes both the prefixed and unprefixed declarations. It also writes a solid color fallback first (progressive enhancement) so any engine without support — or a user who prefers reduced motion — still sees readable text.
Only for large decorative headings. Because the colour changes across each letter, parts of the text can drop below the WCAG contrast minimum, so it should never be used for body copy.
Gradient text carries a real accessibility cost: the colour varies across every glyph, so the contrast against the page background changes letter to letter and can fall below the WCAG minimum — 4.5:1 for normal text and 3:1 for large text (≥24px, or ≥18.66px bold). This tool computes a live worst-case contrast by sampling the lightest and darkest colour stops (not an average, which would be misleading) and warns when it fails. Reserve gradient text for large display headings, keep body copy solid, and always provide the emitted solid color fallback.
Yes — the tool can pan the gradient by animating background-position. It repaints each frame, so it is capped and wrapped in prefers-reduced-motion.
The generator can animate the gradient by moving background-position across an oversized background-size (200%), producing a flowing colour pan. This is a paint-tier animation — it repaints the text every frame, which can cost frames on large text or low-end phones — so the duration is capped and the emitted @keyframes rule is wrapped in @media (prefers-reduced-motion: reduce) so motion-sensitive users see a static gradient. For heavy use, keep the animated text small in footprint and prefer it on focal headings only.
Detailed Explanation
⚙️Methodology
How Gradient Text Actually Works in CSS
Gradient text is not a text property — it is a paint trick. An element is given a gradient as its background-image, background-clip: text confines that background to the shape of the glyphs, and the text’s own fill is made transparent (-webkit-text-fill-color: transparent, or color: transparent) so the gradient shows through the letters. This generator’s pure engine (gradientTextEngine.ts) holds the design as typed state and serialises the exact background-image gradient plus the clip rule. It always writes -webkit-background-clip: text alongside the unprefixed form, and puts a solid color fallback FIRST so unsupported engines keep readable text (progressive enhancement).
Gradient goes on background-image, then background-clip: text confines it to the glyphs
The text fill must be transparent (-webkit-text-fill-color / color) for the gradient to show
Both -webkit-background-clip: text and background-clip: text are emitted
A solid color fallback is written first so older engines still show readable text
Pure and deterministic — the same state always emits the same CSS
🔧Technical Details
Linear, Radial and Conic Gradients
The tool exposes all three CSS gradient functions and their repeating- variants. linear-gradient(angle, stops) runs colour along a straight axis (0deg points up, increasing clockwise). radial-gradient(shape at x% y%, stops) radiates outward from a centre as a circle or ellipse. conic-gradient(from angle at x% y%, stops) sweeps colour around a centre like a colour wheel. Each supports up to eight colour stops with explicit 0–100% positions, so the engine emits a canonical `color position%` list sorted by position.
linear-gradient: angle in degrees, 0deg = up, clockwise
radial-gradient: circle or ellipse, positioned centre (x% y%)
conic-gradient: sweeps around a centre from a start angle
Up to 8 colour stops, each with an explicit 0–100% position
repeating- variants tile the stop pattern across the box
⚠️Limitations
The Accessibility Cost of Gradient Text
Because the colour changes across every glyph, the contrast against the page background is not a single number — it varies letter to letter, and the reader hits the WORST point somewhere in the word. WCAG requires 4.5:1 for normal text and 3:1 for large text (≥24px, or ≥18.66px bold). Testing an average is misleading, so this tool samples the LIGHTEST and DARKEST colour stops and reports the worst-case ratio against the chosen preview background, warning when it fails. The honest conclusion: gradient text is for large, decorative display headings, never body copy, and should always ship with the solid color fallback.
Contrast varies across each letter; the reader hits the worst point
WCAG: 4.5:1 for normal text, 3:1 for large text (≥24px or ≥18.66px bold)
The tool samples the lightest AND darkest stops (not a misleading average)
Reserve gradient text for large display headings, keep body copy solid
📋Use Cases
Browser Support and Animation Performance
background-clip: text ships in every modern engine, and Chromium dropped the -webkit- prefix in Chrome 120 — but Safari, Chromium 119 and earlier, and Samsung Internet 24 and earlier still require -webkit-background-clip: text, so the generator always emits both. Animating the effect is done by moving background-position across an oversized background-size (200%). That is a PAINT-tier animation: it repaints the text every frame, which can drop frames on large text or low-end devices, so the duration is capped and the emitted @keyframes is wrapped in @media (prefers-reduced-motion: reduce). will-change: background-position can help but should be used sparingly and removed after the animation.
Safari and Chromium ≤119 still need the -webkit-background-clip: text prefix
Chrome 120+ supports the unprefixed background-clip: text
Animating background-position repaints each frame (paint tier) — can jank
Animation is capped and wrapped in prefers-reduced-motion: reduce
🔒Privacy & Security
Private by Design
Everything happens on the user’s device. The text, colour stops and slider values are just numbers and strings serialised into CSS locally in the browser tab — there is no server call and no CDN in the processing path. Nothing is uploaded, logged or stored; the output is plain CSS text copied to the clipboard, and the live preview is clipped by the user’s own browser. The listed font families are local/system stacks, so no font is fetched from a CDN. The tool works offline once loaded, and closing the tab discards all state.
Text, colours and values are serialised into CSS entirely in the browser
No upload, no CDN in the processing path, no server, no tracking
Output is plain CSS copied locally; the preview runs in your own browser
Font families are local/system stacks — no CDN font fetch
CSS gradient types for text and their controls
Gradient
Syntax core
Best for
linear-gradient
angle in deg (0 = up, clockwise) + stops
Straight left→right or diagonal colour runs — the default headline look
radial-gradient
circle | ellipse at x% y% + stops
A glow radiating from a point in the text
conic-gradient
from angle at x% y% + stops
Colour-wheel / rainbow sweeps around a centre
repeating-*
stop pattern tiled across the box
Stripes and banded effects when the stop range is short
All three clip into text via background-clip: text with the -webkit- prefix for Safari and Chromium ≤119, plus a solid color fallback. Gradient text should be reserved for large decorative headings for accessibility reasons. As of July 2026.
