Gradient text
Saved palettes
What is CSS gradient text?
Gradient text is a headline whose letters are filled with a color gradient instead of a flat color — done
entirely in CSS, no image and no SVG. The trick is three declarations working together: the gradient
paints the element's background, background-clip: text crops that background to the letter
shapes, and a transparent text fill lets it show through. This css gradient text generator writes the
whole recipe from a live preview of your own words, including the -webkit- prefixed lines
real browsers still want and a solid-color fallback so no visitor ever sees invisible text.
How to build your gradient headline
- Type your headline in the Text drawer — the stage renders it live at your chosen size and weight.
- Set 2–5 color stops in the Gradient drawer, or press Harmonize to derive a matching set from your first stop.
- Drag Angle to aim the gradient — 90° flows left-to-right, 135° gives the classic diagonal.
- Optionally flip Motion to Animated and set the loop speed for flowing color.
- Copy CSS for the full rule, Copy Tailwind for utilities, or Copy HTML for a complete paste-ready heading.
Animated gradient text, done responsibly
The animated variant everyone searches for — color visibly flowing through a headline — is a
background-position loop over an oversized gradient, and this generator exports it complete: the
@keyframes block, your loop speed, and a prefers-reduced-motion guard that
parks the animation for users who've asked their system for less movement. That guard isn't an
afterthought; motion you can't opt out of is an accessibility failure, and the copied snippet gets it
right by default. Static remains the default here for the same reason.
Where gradient headings work best
Gradient text earns its place on the words you want remembered: the hero headline, a section number, a single emphasized phrase inside plain text. Big and bold is the rule — at large sizes each letter has room to show the color transition, while body-size gradient text just looks smudged. Keep the rest of the page's type flat so the gradient stays special, and check the lightest stop against your background: rainbow text css is fun until one yellow stop vanishes on white. The gradient heading css this tool copies inherits your font, so it drops into any design system unchanged.
Frequently asked questions
Is this gradient text generator free?
Yes — free for personal and commercial use, with no signup and no watermark. Copy CSS, Copy Tailwind, and Copy HTML all output the complete working effect; the only trace of us is a small code comment crediting MeshSVG, which you can delete.
How does CSS gradient text actually work?
Three declarations do the trick: the gradient is painted as the element’s background-image, background-clip: text crops that background to the letter shapes, and a transparent text color lets the gradient show through where the letters are. This generator writes all three for you, plus the -webkit- prefixed lines Safari and Chrome still expect.
Which browsers support gradient text?
All modern ones — Chrome, Edge, Safari, Firefox, and mobile browsers — as long as the -webkit-background-clip and -webkit-text-fill-color prefixed lines ride along, which the copied CSS includes. For anything older, the snippet starts with a solid color fallback line, so unsupported browsers show your first gradient stop instead of invisible text.
How do I animate gradient text?
Flip the Motion control to Animated: the gradient’s background is enlarged to 200% and a keyframe loop slides its position back and forth, so color flows through the letters. Copy CSS includes the @keyframes block and the loop speed you chose. The export also wraps the animation in a prefers-reduced-motion guard, so users who opt out of motion see the static gradient.
Can I use gradient text with Tailwind CSS?
Yes — Copy Tailwind gives you the static effect as utilities: an arbitrary-value background image plus bg-clip-text and text-transparent, working in Tailwind v3 and v4 with no config. The animated variant needs a real @keyframes block, which utilities alone can’t declare, so for that one use the Copy CSS export (the snippet says so too).
Is gradient text accessible?
It can be, with two habits: keep every gradient stop readable against your page background — the contrast rule applies to the lightest stop, not the average — and prefer large, bold text, where thin strokes won’t make the gradient dissolve into noise. The fallback color line in the export also means no browser ever renders your headline invisible.
Does animated gradient text hurt performance?
The animation moves background-position on one element, which browsers handle cheaply — but it does repaint the text layer each frame, so use it on a headline or two, not on every heading of a long page. The static variant costs nothing at all after first paint, and the reduced-motion guard removes the loop entirely for users who ask for less movement.