Free CSS Gradient Text Generator
Something not working? Report a problem
About the Gradient Text Generator
Fill text with a linear, radial or conic gradient — preview your own words live, copy the CSS or Tailwind classes, or download it as a transparent PNG or SVG.
How to use the Gradient Text Generator
- 1Type your heading, then pick a font, weight and size.
- 2Start from a preset or press Random, or pick Linear, Radial or Conic and set the direction with the dial.
- 3Edit colour stops on the bar: drag a stop to move it, tap the bar to add one, drag a stop off the bar to remove it. Tap a stop's swatch to change its colour.
- 4For a website, copy the code as CSS or Tailwind classes. Tick Include font size and weight to copy those too, or turn on Animate the gradient.
- 5For a logo, thumbnail or post, download the text as a transparent PNG or an SVG.
Frequently asked questions
How does gradient text work in CSS?
The gradient is set as the element's background, background-clip: text cuts that background to the shape of the letters, and color: transparent lets it show through. The copied code includes the -webkit- prefixed clip too, which older Safari and Chrome versions need.
Why does the code include display: inline-block?
A heading is a block, so it's as wide as its container, and the gradient is stretched across that whole width. With short text you'd only see the first part of the gradient. inline-block shrinks the box to the text, so the full gradient lands on your words, exactly as in the preview.
Why does the code add padding-bottom?
The gradient is only painted inside the element's box. With a tight line height, such as line-height: 1, the tails of letters like g, y and p hang below that box and get cut off. A little padding at the bottom (0.15em) makes room for them.
Can I download the gradient text as an image?
Yes. PNG gives a transparent image at twice the size you set, sharp enough for logos, thumbnails and social posts, and works with every gradient type. SVG keeps the text editable and scales to any size, but it only supports linear and radial gradients, and it shows the text in a font installed on the device that opens it. Images show the gradient standing still, even when animation is on.
What does the fallback colour do?
In a browser that can't clip a background to text, transparent text would be invisible. With Add a solid fallback colour ticked, the text gets a plain colour (the middle of your gradient) and the gradient is applied only where the browser supports it. Every current browser does, so it's optional.
Can I animate the gradient?
Yes. Turn on Animate the gradient and the code adds a keyframe animation that slides the gradient back and forth across the text. It works with any gradient, and the code switches the animation off for visitors who have asked their device for reduced motion.
How do I use it with Tailwind CSS?
Choose Tailwind under Code. You get classes such as bg-[linear-gradient(90deg,#6366f1_0%,#ec4899_100%)] bg-clip-text text-transparent to paste into your element's className. If the gradient is animated, also paste the @keyframes block into your global CSS once.
Is my text sent anywhere?
No. Everything, including the image downloads, runs in your browser and nothing is uploaded or saved. Copy your code or download your image before you leave the page.