Generator Tools

CSS Text Gradient Generator

Build a CSS gradient text effect with live preview, copy CSS, Tailwind, and HTML. Linear, radial, conic, custom stops, presets. Free, no signup.

Live preview

The preview uses the exact CSS that the tool copies, so what you see is what you paste.

Gradient text

Preview text

Font family

Font weight

Font size

96px

Gradient type

Angle

90°

Color stops

Each stop has a color, opacity, and a position from 0 to 100. Use two or more stops; you can keep up to 8.

Position

Opacity

100%

Position

50%

Opacity

100%

Position

100%

Opacity

100%

Presets

Tap a preset to load a curated gradient. The current text and typography settings stay the same.

CSS output

The cross-browser background-clip pair is included so the gradient shows through the glyphs in Safari, Chrome, Firefox, and Edge.

.gradient-text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 96px;
  line-height: 1.1;
  background-image: linear-gradient(90deg, #ff6b6b 0%, #ffb347 50%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Tailwind arbitrary value

Drop these classes on a heading. Pair with a font family and size of your own.

class="text-transparent bg-clip-text bg-[image:linear-gradient(90deg,_#ff6b6b_0%,_#ffb347_50%,_#ffd166_100%)]"

HTML snippet

A self-contained style block with the gradient applied to an h1 so you can paste it straight into a static page.

<style>
.gradient-text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 96px;
  line-height: 1.1;
  background-image: linear-gradient(90deg, #ff6b6b 0%, #ffb347 50%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>
<h1 class="gradient-text">Gradient text</h1>

How the gradient is painted on the text

background-image draws the gradient onto the element. By default it sits behind the text color and you do not see it through the glyphs.
background-clip: text clips the background so only the area covered by the text shows. Safari, Chrome, and most Chromium browsers also need the prefixed -webkit-background-clip: text alongside it for the effect to render.
color: transparent hides the normal text color so the clipped background shows through. WebKit reads the prefixed -webkit-text-fill-color: transparent so both are emitted to keep the effect portable.
At small sizes the gradient can be hard to read. The technique works best with bold weights, large sizes, and gradients that have enough contrast against the background behind the text.

Tips and pitfalls

Always include a fallback color (or remove the transparent fill in a media query) for older browsers that do not support background-clip on text.
For accessibility, keep enough contrast at every stop in the gradient. A gradient that fades into the page background will be invisible at one end of the text.
Conic gradients sweep around the bounding box of the text, not around each glyph, so the effect spans the entire line.
Radial gradients position relative to the bounding box too, which is why the spotlight preset works best on short headlines.
If you copy the Tailwind class into a JIT-compiled project, escape parentheses and percent signs only if your tooling requires it; most modern Tailwind versions parse the arbitrary value as is.

Gradients render in your browser. The CSS, text, and color values are never sent to a server.

How to use

Pick a preset to start from a finished look, or build a gradient from scratch in the Gradient type panel (linear, radial, or conic).
Adjust the angle for linear and conic gradients, or the shape and position for radial gradients.
Edit color stops: change the hex color, drag the position from 0 to 100, and lower the opacity to fade a stop. Add stops up to eight, or use Reverse stops to flip the direction.
Edit the preview text, font family, weight, and size to match where you will use the gradient. Switch the preview background to make sure the effect reads against light, dark, or your own brand color.
Copy the CSS block for a portable rule, the Tailwind class string for an arbitrary-value utility, or the HTML snippet for a drop-in style plus h1.

About this tool

CSS Text Gradient Generator builds the classic gradient text effect using background-image plus background-clip: text and a transparent text color, the same recipe used by Tailwind's text-transparent bg-clip-text bg-gradient utilities. Pick linear, radial, or conic, set the angle (for linear and conic) or shape and position (for radial), and edit a list of color stops with their own color, opacity, and position. The preview uses the exact CSS that gets copied so what you see is what you ship. Eight presets cover the most-searched looks: sunset, ocean, mint, neon, gold, rainbow, radial spotlight, and a conic sweep. The output panel emits three formats. The full CSS block emits both -webkit-background-clip and background-clip for cross-browser support, and both -webkit-text-fill-color: transparent and color: transparent so the effect renders in Safari, Chrome, Firefox, and Edge. The Tailwind block is the arbitrary-value variant that lets you drop the same gradient on a heading without writing a custom CSS class. The HTML snippet is a self-contained style block plus an h1 you can paste straight into a static page. Controls include font family (sans, serif, mono, display), weight from 300 to 900, font size from 24 to 220 pixels, four preview backgrounds (dark, light, checker, custom color), add and remove stops up to eight, and a reverse-stops shortcut. Useful for landing-page headlines, hero copy, gradient logos, marketing CTAs, blog post titles, and dashboard branding. Everything renders locally in your browser, so the colors, text, and CSS values are never sent to a server.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Text Gradient Generator

How to use

About this tool

You may also like

CSS Gradient Generator

CSS Text Shadow Generator

CSS Mesh Gradient Generator

OKLCH Color Converter

Color Format Converter

HEX to RGB Converter