Gradient Text CSS Generator
Make text filled with a gradient using CSS, and copy the code.
Colour that flows through letters
Gradient text — where the letters are filled with a colour blend rather than a flat colour — is a striking effect for headings and logos. This generates the CSS for it and copies the code, so you can add a flowing gradient fill to text without wrestling the slightly awkward technique by hand.
Pick your colours and copy the gradient-text CSS.
The technique, and using it well
The effect works by painting a gradient background onto the text and then clipping that background to the shape of the letters, so the gradient shows only through them. It is a lovely accent for a hero heading or a brand name, but it earns its impact by being rare — gradient text on every heading loses its punch and can hurt readability, since a gradient reduces contrast against the background. Keep it for one focal piece of text, use a gradient whose colours stay legible, and it looks premium. A subtlety worth noting: because it relies on clipping, a fallback flat colour is wise for anywhere the effect does not render.
Frequently asked questions
How does gradient text work?
A gradient background is painted onto the text and clipped to the shape of the letters, so the blend shows only through them.
When should I use it?
Sparingly — on one focal heading or a brand name. On every heading it loses impact and can hurt readability by lowering contrast.
Is anything uploaded?
No. The CSS is generated in your browser.