What is Gradient Text?
A gradient text generator that fills your text with a color gradient using CSS background-clip. Pick two colors and an angle, type your headline, preview it on a dark stage and copy the cross-browser code. Perfect for eye-catching headings and logos.
How Gradient Text works
Gradient text works by painting a gradient as the element's background, clipping it to the text shape with background-clip: text, and making the text fill transparent.
Example: background: linear-gradient(90deg,#ec4899,#3b82f6); -webkit-background-clip:text; color:transparent;
Common uses
- Style hero headings and logos
- Create colorful, modern typography
- Match brand gradient colors
- Copy code that works in all modern browsers
Frequently asked questions
How do I make gradient text in CSS?
Apply a gradient background, then background-clip: text with a transparent text color. This tool writes it for you.
Does it work in all browsers?
Yes, with the -webkit-background-clip prefix included here it works in all current browsers.
Can I use more than two colors?
Yes — CSS gradients support multiple color stops; extend the generated value with more colors.