Text Gradient Generator

A text gradient is a CSS visual effect where a gradient is applied to the text characters themselves, rather than the background behind them. This is achieved by combining two CSS properties: background-clip: text (which clips the background to the shape of the text) and color: transparent (which makes the text fill transparent so the gradient shows through). The result is text that appears to be filled with a gradient - a popular visual treatment for headings, logos, and hero sections. Our Text Gradient Generator makes this technique accessible to everyone, generating the correct CSS code automatically without needing to remember the syntax.

1. Type Your Text: Enter the word or phrase you want to apply the gradient to. The live preview updates instantly as you type, showing exactly how your text will look with the current gradient.
2. Configure the Gradient: Choose from linear, radial, or conic gradient types. Add or remove colour stops using the colour picker and position slider. Adjust the direction (for linear) or angle (for conic). The gradient swatch and text preview update with every change.
3. Adjust Typography: Set the font size (12px to 120px), font weight (Thin to Black), and font family. See how the gradient text looks at different sizes - from small UI labels to large hero headings.
4. Copy the CSS: When you are happy with the result, copy the complete CSS class or just the background property. The CSS includes the background, -webkit-background-clip, background-clip, and color: transparent declarations - everything you need to use it in your project.

• Linear Gradient: The gradient blends colours along a straight line. You can choose from 8 preset directions (left to right, top to bottom, diagonal, etc.) or set a custom angle (0° to 360°). Linear gradients are the most common type for text and work well for bold, horizontal colour transitions on headings.
• Radial Gradient: The gradient radiates outward from a central point in a circular pattern. Radial gradients create a glowing, spotlight-like effect on text - ideal for hero sections and attention-grabbing headlines where the brightest colour is at the centre.
• Conic Gradient: The gradient rotates around a central point like a colour wheel. Conic gradients create rainbow-like effects that cycle through colours. The start angle (0° to 360°) determines where the colour cycle begins. Conic text gradients work best with multiple colour stops for a vibrant, multi-colour effect.

The background-clip: text technique is supported in all modern browsers - Chrome 90+, Firefox 90+, Safari 15.4+, and Edge 90+. For the best results:

• Use generous font sizes: Text gradients are most visible at large sizes (32px and above). At small sizes, the gradient bands may not be noticeable.
• Provide sufficient contrast: Ensure the gradient colours have enough contrast against the page background, especially for the start and end of the gradient where text may blend into the background.
• Pair with a static fallback: For critical content, consider adding a solid colour fallback. The CSS generated by our tool gracefully degrades - if background-clip: text is not supported, the text will show the transparent colour against whatever background is underneath.
• Avoid on body text: Text gradients are best reserved for headings, logos, and decorative elements. Body text should use solid colours for maximum readability and accessibility.