Text Gradient Generator
Gradient-filled text with background-clip, optional shimmer animation.
About this tool
Type your text, choose a linear, radial or conic gradient with two or three colours, the angle, font size and weight, and optionally animate it. The live preview updates as you go, and you copy the CSS and HTML.
How gradient text works
CSS can't set a gradient as a text colour directly, but it can paint a gradient as the element's background and then clip that background to the shape of the text with background-clip: text, making the text fill transparent so the gradient shows through. Safari still needs the -webkit-background-clip and -webkit-text-fill-color prefixes, which are included. A solid colour property comes first as a fallback for any browser that can't clip. The animated version doubles the background size and slides the background-position in a loop for a gentle shimmer, and it's switched off for visitors who've enabled prefers-reduced-motion. Linear gradients suit most headlines. Radial gradients glow from the centre, and conic gradients sweep around and repeat the first colour to avoid a hard seam. Honest limits: contrast varies along a gradient, so make sure the lightest part is still readable against your background (WCAG asks for 3:1 for large text). Use gradient text for big headings, not long paragraphs, and screenshots or very old browsers may show the fallback colour. The CSS gradient generator, the mesh gradient generator and the gradient border generator are related.
Frequently asked questions
How do I make gradient text in CSS?
Set a gradient background, then background-clip: text and color/-webkit-text-fill-color: transparent.
Does gradient text work in Safari?
Yes, with the -webkit-background-clip: text prefix, which the generator includes.
Is gradient text accessible?
It can be. Check contrast at the lightest part of the gradient and keep it for large headings.
Is anything stored or sent?
No. Everything is generated in your browser and nothing is stored or sent.