🌈 CSS Gradient Text Generator
Give text a colour gradient: pick two colours and an angle, see it live, then copy the CSS (background-clip: text) or download a transparent PNG for anywhere that can't run CSS.
background: linear-gradient(90deg, #7c3aed, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;Gradient text uses background-clip: text with a transparent fill. Keep the plain text readable for accessibility — the gradient is decorative. PNG export renders in your browser; nothing is uploaded. 🔒
How the css gradient text generator works
The CSS approach paints a linear-gradient as the element's background, clips that background to the shape of the text with background-clip: text, and makes the text fill transparent so the gradient shows through. The tool builds that rule from your colours and angle and previews it. For places that can't run CSS — social posts, images — it also renders the same gradient text to a 2× PNG with a transparent background.
background-clip: text needs the -webkit- prefix to work across browsers, which the copied CSS includes. Because the visible colour comes from the background, always keep the underlying text real (not an image) so screen readers and search still read it — the gradient is purely decorative. The PNG export is for contexts where you can't use CSS at all.
Frequently asked questions
How do I make gradient text in CSS?
Set a linear-gradient as the background, add background-clip: text (with the -webkit- prefix) and make the text fill transparent so the gradient shows through the letters. This tool generates that exact CSS from your colours and angle.
Why is my gradient text invisible?
Almost always a missing prefix or fill: you need -webkit-background-clip: text and -webkit-text-fill-color: transparent (plus the unprefixed versions). The copied CSS here includes all of them.
Can I use gradient text where CSS isn't allowed?
Yes — use the Download PNG button to export the styled text as a transparent image you can drop into a post, slide or design tool.
Is gradient text bad for accessibility?
Only if you replace real text with an image. Keep the actual text in the HTML and treat the gradient as decoration; screen readers then read it normally.