CSS Gradient Text Generator
Build CSS gradient text with linear, radial, or conic gradients. Up to 5 color stops, animation toggle, typography controls. Copy CSS with @keyframes.
.gradient-text {
background: linear-gradient(90deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 64px;
font-weight: 800;
display: inline-block;
}gradientGradient
text_fieldsTypography
animationAnimation
paletteGradient Gallery
30 handpicked gradient presets in 5 categories. Click any to apply it to the generator above.
trending_upPopular
local_fire_departmentWarm
ac_unitCool
auto_awesomeVibrant
spaSubtle
What is the CSS Gradient Text Generator?
A CSS gradient text generator builds the trick that paints text with a gradient instead of a solid color: a background-image gradient combined with background-clip: text and color: transparent. The browser renders the gradient inside the letter shapes. Adding a background-position animation makes it shift and shimmer.
How to use the CSS Gradient Text Generator
- 1
Type your text
Drop the headline you want into the Preview Text field. Editing it updates the preview live.
- 2
Pick the gradient
Linear (angled), radial (from center), or conic (sweep). Set the angle and add up to 5 color stops with positions; the gradient bar at the bottom shows the raw color flow.
- 3
Tune typography
Font size, weight, letter spacing, text transform. Defaults are bold 64px, which works for most heroes; turn down for body.
- 4
Copy the CSS
The output includes background-clip vendor prefixes and, if animation is on, the @keyframes gradient-shift rules, ready to paste.
Frequently Asked Questions
How does CSS gradient text work?
Three properties together: background-image carries the gradient, background-clip: text clips that background to the letter shapes, and color: transparent (with -webkit-text-fill-color: transparent for older WebKit) makes the original text invisible so the clipped gradient shows through. The output includes both prefixed and unprefixed forms.
What gradient types are supported?
Three: linear (a straight angle, 0 to 360°), radial (a circle from the center outward), and conic (a sweep around a center point, also angle-based). All three accept up to 5 color stops with custom positions. The Angle Presets give you quick 45° increments.
Can I animate the gradient text?
Yes. Toggle the Animation switch to add a background-size: 200% 200% plus a gradient-shift keyframe that loops the position from 0% to 100% and back. Duration is adjustable 1 to 10 seconds. The keyframe rule ships in the copied CSS.
Is gradient text accessible?
Use it for headings and decorative elements only. Gradient text reduces contrast and can fail WCAG color-contrast ratios, especially at lighter stops. For body copy, keep solid colors. When you do use gradient text, pick stops that maintain good contrast against the background and avoid mid-tone backgrounds where any stop will blend in.