Text Gradient Generator
Type your text, pick two colors and an angle, and copy the CSS. Uses background-clip: text, no images or extra markup needed.
Colorfool
CSS
background-image: linear-gradient(90deg, #2F6FED, #EC4899);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;Gradient text FAQ
How do I make gradient text in CSS?
Set a background-image gradient on the text element, then background-clip: text (with the -webkit- prefix for Safari) and color: transparent so the gradient shows through the letters instead of a solid color.
Does gradient text work in all browsers?
background-clip: text is supported in every current browser, but Safari still needs the -webkit-background-clip and -webkit-text-fill-color prefixes, both included in the copied CSS here.