CSS Gradient Text Generator
Generate CSS gradient text with custom text, two-color gradients and angle, with live preview and one-click copy
Settings
Preview
The preview is for visual reference. Copy the CSS to apply it to any element.
CSS
.gradient-text {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}How to Use the CSS Gradient Text Generator
What is gradient text?
Gradient text is a modern web design effect that clips a gradient background to the glyph shapes, producing smooth color transitions on text. It is commonly used for headings, taglines and brand highlights.
How it works
- background: uses linear-gradient() to define colors and angle.
- -webkit-background-clip: text: clips the background to text in WebKit browsers.
- -webkit-text-fill-color: transparent: makes the fill transparent so the gradient shows through.
- background-clip: text + color: transparent: improves compatibility across modern browsers.
Steps
- Enter the text you want to style.
- Pick the start and end colors.
- Adjust the angle and preview size to fine-tune the look.
- Click “Copy CSS” and paste it into your stylesheet.
FAQ
Does it work in all browsers?
Most modern browsers support gradient text. The generated CSS includes both standard properties and WebKit-prefixed ones for consistent rendering in Chrome, Safari, Firefox and Edge. Older browsers will fall back to normal text.
Can I create multi-color gradients?
The UI generates a two-color gradient. You can add more color stops after copying, for example: linear-gradient(90deg, #667eea, #764ba2, #f093fb).
Will gradient text hurt SEO?
No. The text remains real, selectable DOM text, so search engines can index it. Compared with text rendered as images, gradient text is generally better for accessibility and indexing.