CSS Gradient Text Generator

Gradient text is made by painting a gradient as the element's background, clipping that background to the shape of the letters with background-clip: text, and making the text color transparent so the gradient shows through. This generator writes that rule with the -webkit- prefixes some browsers still need, wraps it in @supports so browsers without support fall back to a solid color, and renders the result in your own browser.

How to use this tool

1. Type the text and choose two to eight gradient colors (one per line, optional positions).
2. Set the angle, font size, weight and font.
3. Keep "fit to text width" so short headings show the whole gradient.
4. Copy the CSS and HTML; check the fallback color's contrast.

Formula

background-image: linear-gradient(<angle>, <colors>); background-clip: text; -webkit-text-fill-color: transparent;

The gradient is sized to the element box, so on a full-width heading only part of it lies behind the letters — display: inline-block shrinks the box to the text. The fallback color is the first gradient color unless you choose another.

Example

The defaults produce a coral-to-peach heading: linear-gradient(90deg, #ff7e5f, #feb47b) clipped to 64 px, weight-800 text, with color: #ff7e5f as the fallback outside @supports. That fallback reaches only 2.49:1 on white, below even the 3:1 WCAG asks for large text, so choose darker colors when the heading carries meaning.