Text Gradient Generator
Create stunning gradient text effects with CSS background-clip. Preview live, copy CSS or SVG instantly.
① Type your text ② Customize colors, angle and style ③ Copy the CSS gradient
Text
Size
Weight
Font
Align
Type
Color stops
0%
100%
Presets
Hello World
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
What is CSS Gradient Text?
CSS gradient text uses the background-clip: text technique to apply a gradient as the text fill color. By setting -webkit-text-fill-color: transparent and background-clip: text, the gradient image shows through the text shape. This works with linear-gradient, radial-gradient, and conic-gradient, giving designers a powerful way to create visually striking typography for hero sections, headings, and logos without images or SVG.
FAQ
background-clip: text clips the element's background to the shape of its text. Combined with -webkit-text-fill-color: transparent, the gradient or image used as background becomes visible only through the text characters, creating the gradient text effect.
-webkit-text-fill-color overrides color for the text fill in WebKit/Blink engines. Using color: transparent alone may not fully hide the text fill in all browsers. Using both ensures consistent results across Chrome, Safari, Edge, and Firefox.
Linear gradients transition colors along a straight line at a chosen angle. Radial gradients radiate from a center point outward. Conic gradients sweep colors around a center point like a color wheel. Each creates a distinct visual effect on the text.
Support is excellent — all modern browsers support it. Chrome, Edge, Opera and Firefox support background-clip: text unprefixed. Safari requires the -webkit-background-clip: text prefix. This tool outputs both prefixed and standard properties for full compatibility.
Set background-size to 200% 200% and animate background-position in a @keyframes rule. For example: @keyframes gradientShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }. Apply the animation to the text element with animation: gradientShift 3s ease infinite.
Gradient text works best for hero headings, section titles, brand names and decorative elements where visual impact matters. Avoid it for body text or small sizes where gradients reduce legibility. Always ensure sufficient contrast between the lightest gradient stop and the background.
Check contrast for the lightest color stop against the background. Do not rely solely on color to convey meaning. Test at smaller font sizes to confirm legibility. Provide text alternatives where gradient text is used for purely decorative purposes, and avoid using gradient text for long passages.