CSS Gradient Text Generator

Create CSS gradient text with background-clip

This tool generates CSS gradient text: a heading whose letters are filled with a linear gradient instead of a flat color. The technique paints the gradient as the element's background, clips that background to the shape of the glyphs with background-clip: text, and makes the text fill transparent so the gradient shows through.

Example output

The defaults (sky blue, violet and pink at 90°) produce:

.gradient-text {
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<h1 class="gradient-text">Gradient text</h1>

Font size and weight are only used for the preview, so the rule does not override your existing heading styles.

Why both prefixed and unprefixed lines?

The unprefixed background-clip: text is now supported in current Chrome, Edge, Firefox and Safari, but Chromium-based browsers only recently added it and older versions, including many embedded WebViews, understand only -webkit-background-clip: text. Keeping both lines covers old and new engines. -webkit-text-fill-color: transparent hides the glyph fill in WebKit and Blink, and color: transparent does the same elsewhere.

Options explained

• Colour 1, 2 and 3 – stops spread evenly across the gradient. Untick Add third colour for a two-stop gradient.
• Angle – 90° runs left to right, 180° top to bottom, 135° diagonally.
• Font size and Weight – heavier weights show more of the gradient; thin strokes can make it barely visible.

Tips and common mistakes

• The gradient spans the box, not the words. A block-level h1 is as wide as its container, so a short heading shows only the first part of the gradient. Add display: inline-block or width: fit-content to fit the background to the text.
• Multi-line text. On an inline element that wraps, add box-decoration-break: clone (with the -webkit- prefix for Safari and Chromium) so each line gets the full gradient.
• Text shadows show through. With a transparent fill, a text-shadow is visible behind the gradient and muddies it. Use filter: drop-shadow() instead.
• Provide a fallback. In a browser without clipping support the text would be invisible. Wrap the rule in @supports (background-clip: text) or (-webkit-background-clip: text) and keep a solid color outside it.
• Check contrast of both ends. Every part of the gradient should stay readable on your background; test the lightest stop with the color contrast checker.

For radial, conic or multi-stop gradients with custom positions, design the background in the CSS gradient generator and paste it into the background line. For glow and outline effects on solid text, try the CSS text shadow generator.

Privacy

Your text and colors are processed only in your browser; nothing is uploaded.