How to Create a CSS Text Gradient (Color Text Effect)
Gradient text is one of the most eye-catching CSS effects — and it's surprisingly simple. The technique uses background-clip: text to mask a gradient background to the shape of the text. It works in all modern browsers and requires just three lines of CSS.
- Apply gradient colors to text with CSS background-clip.
- The Basic Technique.
- Covers gradient directions and types.
- Covers animated gradient text.
- Covers fallbacks and tips.
The Basic Technique
The gradient text effect uses three properties together:
.gradient-text {
background: linear-gradient(135deg, #FF6B6B, #A18CD1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
background sets the gradient. background-clip: text clips the background to the text shape. text-fill-color: transparent makes the original text color invisible so the gradient shows through. The -webkit- prefix is still needed for Safari compatibility.
Gradient Directions and Types
Linear gradients flow in a straight line — change the angle for different effects: 90deg for horizontal, 180deg for vertical, 135deg for diagonal. Radial gradients radiate from a center point, creating a spotlight effect on text. Conic gradients create a color wheel effect — striking for circular or short headlines. You can use any CSS gradient syntax. Multi-stop gradients work too: linear-gradient(90deg, #FF6B6B 0%, #FFA62E 50%, #43E97B 100%) creates a three-color rainbow effect.
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.Animated Gradient Text
Animate the gradient position for a shimmering effect:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps..shimmer-text {
background: linear-gradient(90deg, #FF6B6B, #FFA62E, #FF6B6B);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
to { background-position: 200% center; }
}
The key is background-size: 200% — this makes the gradient twice as wide as the element, and the animation slides it across. Use sparingly — animated text can be distracting and fails prefers-reduced-motion accessibility checks.
Fallbacks and Tips
For browsers that don't support background-clip: text (essentially none in 2026, but good practice), set a solid color first: color: #FF6B6B as a fallback before the gradient properties. Gradient text works best on large, bold text — headings and hero titles. On small body text, the gradient is barely visible and can reduce readability. Always check that the gradient colors maintain sufficient contrast against the background. The CSS Text Gradient tool lets you build and preview gradient text with a live editor, then copy the CSS.