CSS Text Gradient Generator
Pour a gradient inside your words. The background-clip trick, wrapped in sliders: your text, your colors, your angle — with the transparent-fill gotchas already handled in the output.
Settings
Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.
The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
Related generators & tools
- CSS Gradient GeneratorBackgrounds & Color
- CSS Neon Text GeneratorShadows & Effects
- CSS Text Shadow GeneratorShadows & Effects
- CSS Font Pairing ToolTypography & Buttons
- CSS Keyframes GeneratorAnimation & Motion
- CSS Glassmorphism GeneratorBackgrounds & Color
How it works
The mechanism: paint a gradient background on the text element, clip that background to the glyph shapes with background-clip: text, then make the text fill itself transparent so the clipped background shows through. The -webkit- prefixed pair is still required for full coverage; the plain color line is your fallback if clipping ever fails.
Taste notes: this belongs on short display text — headings, logos, stat numbers — never body copy, where mid-word color shifts wreck readability. Keep both gradient colors similar in lightness so every part of the word keeps contrast with the page.
Run the code — try it yourself
Give the h1 the full four-line treatment with a 120° blend from #3E6787 to #63B29A — and keep the fallback color line.
Frequently asked questions
My text disappeared entirely!
You set the fill transparent without a background to clip, or clip:text isn't applying. Ensure background, both clip lines and the fill-color line travel together.
Can I animate the gradient inside text?
Yes — oversize the background (background-size:200%) and animate background-position; the clip follows automatically.
Does it work on any font?
Any font, but heavier weights show more gradient — thin strokes barely have room for the blend.
Accessibility concerns?
The text stays real text — selectable, screen-reader visible. Just verify contrast at the gradient's lightest point.
Keep going
Gradient ink is a signature move — this site's own headlines use it. One headline per view, colors close in lightness, and it reads premium instead of loud. The underlying image model is in the Gradients lesson; pair the result with a face from the Font Pairing tool.
CSSmatic is a non-profit project, made by developers for developers.