Quick answer: To create gradient text in CSS, apply a gradient as the element’s background, clip that background to the text, and make the text fill transparent.
.gradient-text {
background: linear-gradient(90deg, #7c3aed, #06b6d4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}This technique makes the background visible only through the shape of the text.
Basic CSS Gradient Text Example
Start with simple HTML:
<h2 class="gradient-text">Gradient Text</h2>Then apply the CSS:
.gradient-text {
background-image: linear-gradient(90deg, #ff4d8d 0%, #7c3aed 50%, #06b6d4 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}How the Technique Works
1. Create the gradient
linear-gradient() creates the color transition. You can change its angle, colors and stop positions.
2. Clip the background to the text
background-clip: text limits the painted background to the foreground text shape.
3. Make the normal text color transparent
color: transparent allows the clipped background to show through instead of a solid font color.
Add a Solid-Color Fallback
If you need a conservative fallback, declare a readable text color before the gradient-related declarations. Browsers that support the clipping technique can then apply the gradient.
.gradient-text {
color: #6d28d9;
background: linear-gradient(90deg, #6d28d9, #0891b2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}Vertical and Diagonal Gradient Text
Change the gradient direction rather than the clipping technique:
/* Top to bottom */
background: linear-gradient(to bottom, #f97316, #ec4899);
/* Diagonal */
background: linear-gradient(135deg, #22c55e, #0ea5e9);Gradient Text With Multiple Color Stops
background: linear-gradient(
90deg,
#ef4444 0%,
#f59e0b 30%,
#10b981 65%,
#3b82f6 100%
);Extra stops give you more control over where each color becomes dominant.
Why Is My Gradient Text Invisible?
- The text was made transparent but the gradient declaration is missing or invalid.
- The clipping declaration is not being applied.
- Another CSS rule is overriding the background or text color.
- The gradient colors have insufficient contrast against the surrounding page.
- A browser-specific compatibility issue requires the prefixed declaration in your supported environment.
Gradient Text From a Figma Design
If you are translating an existing design rather than creating a gradient from scratch, first convert its color stops and direction. Our Figma Gradient to CSS guide explains that workflow.
Accessibility Considerations
Gradient text still needs to remain readable. Check contrast across the full gradient rather than testing only one color. Avoid using decorative gradient styling for long paragraphs, error messages or other text where clarity is more important than visual effect.
Frequently Asked Questions
Can I use a radial gradient on text?
Yes. Replace linear-gradient() with radial-gradient() while keeping the text-clipping technique.
Can I animate gradient text?
Yes. A common approach is to use an oversized background and animate background-position. Keep motion subtle and respect reduced-motion preferences where appropriate.
Should I use gradient text for body copy?
Usually not. It works best for short display text such as headings or labels where readability can be verified carefully.
Last reviewed: October 2026. Test the final result in the browsers your project supports.
