CSS Gradient Text Generator

Your landing page headline needs a gradient that flows from blue to purple to pink across the text — not the background, the actual letters. You Google it and find the background-clip: text trick, but the recipe requires 5 CSS properties working together (background, -webkit-background-clip, background-clip, -webkit-text-fill-color, color: transparent), the -webkit- prefix is still needed in 2026, and getting the gradient angle right for text that wraps to multiple lines takes experimentation.

Why This Tool (Not Copy-Pasting the Snippet)

The background-clip: text snippet is widely copied, but customizing the gradient (direction, colors, stop positions) and seeing how it looks on actual text requires a live preview. This tool lets you pick colors, adjust the angle, switch between linear/radial/conic gradients, and see the result on sample text in real time — then copy the complete CSS including the -webkit- fallbacks. Everything runs in your browser; no data is sent anywhere.

How CSS Gradient Text Works

CSS gradient text uses the background-clip: text technique — a clever combination of CSS properties that clips a gradient background to the shape of the text characters, making the gradient visible only through the letters:

.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

The key properties:

• background — sets the gradient as the element’s background
• -webkit-background-clip: text / background-clip: text — clips the background to the text shape only
• -webkit-text-fill-color: transparent / color: transparent — hides the solid text color, making the gradient visible through the letters

This technique works with any CSS gradient type: linear, radial, and conic.

Gradient Types for Text

Linear Gradient

The most common type for gradient text. Colors flow in a straight line from one direction to another:

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

The angle controls the direction: 0deg is bottom-to-top, 90deg is left-to-right, 135deg is diagonal. Any value from 0 to 360 is valid.

Radial Gradient

Colors radiate outward from a center point, creating a glow or spotlight effect on text:

background: radial-gradient(circle at center, #6366f1 0%, #ec4899 100%);

Radial gradient text works especially well for short words or single letters where the radial spread is visible.

Conic Gradient

Colors sweep around a center point at a specified start angle, producing a rainbow-wheel or hue-rotation effect:

background: conic-gradient(from 0deg at center, #6366f1 0%, #ec4899 50%, #6366f1 100%);

Conic gradients on text create striking visual effects, particularly useful for headings and logos.

Color Stops

Color stops define where each color appears along the gradient axis:

• Position 0% — the start of the gradient (the direction origin for linear, or center for radial)
• Position 100% — the end of the gradient
• Intermediate stops — create multi-color transitions

Add as many stops as needed to build multi-color gradient text:

background: linear-gradient(135deg,
  #ff6b6b 0%,
  #feca57 25%,
  #48dbfb 50%,
  #ff9ff3 75%,
  #6c5ce7 100%
);

Font Size and Weight

Font size and weight significantly affect how a gradient reads on text:

• Larger text (64px+) — gradient colors are more visible and the transition is smoother
• Bold weights (700–900) — thicker strokes make gradient colors more prominent
• Thin weights (100–300) — subtle gradient effect, best with high-contrast color stops
• Small text — gradients may not be visible; consider using solid accent colors instead

Typical recommendations for gradient text headings:

• Hero headings: 64px–96px, weight 700–900
• Section headings: 40px–60px, weight 600–800
• Display text: 96px–128px, weight 800–900

Browser Compatibility

The background-clip: text technique is now universally supported:

This tool outputs both -webkit-background-clip and background-clip for maximum compatibility. The -webkit-text-fill-color property is also included alongside color: transparent as a fallback.

Using Gradient Text in Frameworks

Vanilla CSS / Sass

.hero-title {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 64px;
  font-weight: 700;
}

Tailwind CSS

Tailwind includes built-in utilities for gradient text:

<h1 class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent font-bold text-6xl">
  Gradient Text
</h1>

For custom angles, use arbitrary values in Tailwind v3+:

<h1 class="bg-[linear-gradient(135deg,#6366f1,#ec4899)] bg-clip-text text-transparent">
  Custom Gradient
</h1>

React / Next.js

function GradientHeading({ children }) {
  return (
    <h1
      style={{
        background: "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)",
        WebkitBackgroundClip: "text",
        backgroundClip: "text",
        WebkitTextFillColor: "transparent",
        color: "transparent",
        fontWeight: 700,
      }}
    >
      {children}
    </h1>
  );
}

CSS Custom Properties

Define gradient text as a reusable utility using CSS custom properties:

:root {
  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Frequently Asked Questions

Why does gradient text disappear on some elements? The background-clip: text technique requires the element to have a display value other than inline (use inline-block or block). Also check that overflow: hidden is not clipping the background. This is especially important for <span> elements — add display: inline-block.

Can I animate gradient text? Yes, though CSS background-position animation works better than gradient value animation. Use background-size: 200% and animate background-position from 0% 50% to 100% 50% for a smooth animated gradient text effect.

Does gradient text work with text-stroke? The -webkit-text-stroke property does not apply when background-clip: text is active because the text fill is transparent. However, you can use SVG filters or pseudo-elements to achieve stroke effects alongside gradient text.

Can I mix gradient text with regular text in the same element? No — background-clip: text applies to the entire element. Wrap different text segments in separate <span> elements, applying the gradient class to only the portion you want gradient-colored.

Does this work with web fonts? Yes. The background-clip technique works with any font family, including variable fonts. Ensure the font is loaded before the element renders to avoid FOUT (Flash of Unstyled Text) issues.

Does this tool process my data on a server? No. All CSS generation happens entirely in your browser using JavaScript. No data is transmitted to any server.