How does gradient text work in CSS?

CSS gradient text uses the background-clip: text technique. A gradient is applied as the background, then -webkit-background-clip: text and -webkit-text-fill-color: transparent make the gradient visible through the text shape only.

Can I use gradient text in all browsers?

Yes. The -webkit-background-clip: text technique is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The tool outputs the standard background-clip: text alongside the -webkit- prefixed version for maximum compatibility.

What is the difference between Linear, Radial, and Conic gradients?

Linear gradients transition colors along a straight line at a given angle. Radial gradients emanate outward from a center point. Conic gradients rotate colors around a center point like a color wheel.

How many color stops can I add?

You can add between 2 and 6 color stops. Each stop has an independent color and position (0–100%) giving you fine-grained control over the gradient.

What does the animated gradient option do?

Enabling the animation toggle adds a CSS @keyframes animation that shifts the background-position back and forth, creating a flowing gradient effect. The tool also outputs the required animation CSS so you can paste it directly into your stylesheet.

How accurate is the Tailwind CSS output?

The Tailwind output provides the closest utility classes (bg-gradient-to-*, bg-clip-text, text-transparent) but Tailwind does not have built-in support for arbitrary gradient colors without the JIT arbitrary-value syntax. The tool notes this and the CSS output is always the most precise.

How is the PNG downloaded?

The Download PNG button uses html2canvas-pro to render the live preview area to a canvas at 3× pixel density, then saves it as a high-resolution PNG file.

Can I export the gradient text as an SVG?

Yes. The Copy SVG button generates a self-contained SVG with a linearGradient definition inside and a element that references it, ready to embed in any HTML page or design tool.

Gradient Text Generator

Generate beautiful CSS gradient text with live preview and export

Updated Mar 2026100% Private — runs in browser

Gradient Text Generator

Create beautiful CSS gradient text effects with live preview

Text

Font Size72px

Font Weight

Font Family

Letter Spacing0px

Alignment

Gradient

Type

Angle135°

Color Stops

50%

100%

Presets

Preview

Text GlowAnimate Gradient

Hello World

CSS Output

.gradient-text {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* fallback */
}

Tailwind Classes

bg-gradient-to-br from-[#a855f7] via-[#6366f1] to-[#06b6d4] bg-clip-text text-transparent

* Requires Tailwind JIT with arbitrary value support for hex colors.