CSS Gradient Text Generator
Create gradient-filled text using background-clip: text. Pick 2 or 3 colors and a direction, preview live, then copy production-ready CSS in one click.
About the CSS Gradient Text Generator
Gradient text is created by painting a gradient onto the text's background and then clipping it to the glyph shapes with background-clip: text (and the prefixed -webkit-background-clip: text). The text color itself is made transparent via -webkit-text-fill-color: transparent. This generator produces all the required vendor-prefixed rules so the effect works across modern browsers.
Properties you can control
- Text & size — The label and font size.
- Colors — Two or three gradient stops.
- Direction — Linear gradient angle or keyword.
- Weight — Font weight (300–900).
How to use
- Type the text you want to gradient-fill.
- Set the font size and weight.
- Pick two colors (and optionally a third).
- Choose a direction.
- Click Copy CSS and paste into your stylesheet.
Frequently asked questions
Why does my text disappear? If you forget -webkit-text-fill-color: transparent (or color: transparent), the gradient is hidden behind the solid text color. The generated CSS includes both.
Is background-clip: text supported everywhere? It works in all modern browsers via the -webkit- prefix. Firefox supports the unprefixed property as well.
Can I animate the gradient? Yes — animate background-position with a larger background-size for a flowing effect.