CSS Text Gradient Generator

Create gradient text with CSS for free — choose two or three colours, linear or radial gradients and the angle, preview it live on your own text, add an animated shimmer, and copy production-ready CSS and HTML.

100% private — everything runs in your browser. Conversion happens on your device; nothing is uploaded.

Presets:

Text

Colour 1

Colour 2

Colour 3

Use

Type

Angle

Font size (px)

Weight

Animate the gradient

CSS

Uses background-clip: text with the -webkit- prefix, supported in all modern browsers. The solid fallback colour is transparent, so check contrast against your background.

How to create gradient text in CSS

Type your text and pick a preset or your own colours.
Choose linear or radial and set the angle.
Adjust size and weight, and tick “Animate” for a moving gradient.
Copy the CSS and HTML.

What you can use it for

Gradient headlines for landing pages and hero sections
Eye-catching logo text and buttons
Animated gradient text for banners
On-brand gradient headings in WordPress and Webflow

More free tools

Building for the web?

Format, minify, convert and generate code with our free, private developer tools.

JSON Formatter CSS Minifier HTML Minifier JS Minifier SVG Optimizer CSS Grid Box Shadow Gradient Generator

See all free tools →

Frequently asked questions

How do you make gradient text in CSS?

Set a gradient as the background-image, clip the background to the text with background-clip: text (plus -webkit-background-clip), and make the text fill transparent. The generator writes all of this for you.

Is gradient text supported in all browsers?

Yes — every modern browser supports background-clip: text with the -webkit- prefix.

Is gradient text accessible?

It's still real, selectable text for screen readers. Check that every part of the gradient has enough contrast with the background.