CSS Gradient Text: background-clip Method (Free Generator)

To make CSS gradient text, give the text a gradient background, clip that background to the shape of the letters with background-clip: text, and make the text colour transparent so the gradient shows through. Set a normal solid color first as a fallback. You can design the gradient itself in the free CSS gradient generator, copy its linear-gradient(...) line, and drop it into the snippet below.

The CSS gradient text snippet

.gradient-text {
  color: #2f5bff; /* fallback: a solid colour from your gradient */
  background-image: linear-gradient(90deg, #2f5bff 0%, #7b2cbf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1 class="gradient-text">Hello, gradients</h1>

What each line does:

• background-image paints the gradient behind the element.
• background-clip: text crops that background to the outline of the glyphs. The -webkit- version is still included because some browsers have long needed the prefix.
• -webkit-text-fill-color: transparent makes the letters see-through, so the clipped gradient is what you see. Unlike color: transparent, it leaves color as your fallback for browsers that don't apply the effect.

Step 1: Design the gradient

1. Open the free CSS gradient generator.
2. Choose Linear as the type. Linear works best for text; radial and conic gradients usually look patchy across letter shapes.
3. Set the Direction slider. 90° runs left to right, which reads naturally across a heading. 135° gives a diagonal sweep.
4. Pick your colours in Colour stops. Two or three stops is plenty for text; you can add up to eight.
5. Look at the preview, then press Copy CSS.

Step 2: Adapt the generator's CSS for text

The generator gives you two lines, made for backgrounds:

background: #2f5bff;
background: linear-gradient(90deg, #2f5bff 0%, #7b2cbf 100%);

The first line is a solid fallback for a background. For text, don't paste that line as background: if the clip isn't applied, you'd get a solid box behind see-through letters. Instead:

• Use the first line's colour as color: #2f5bff;.
• Use the second line's gradient as background-image.
• Add the two background-clip lines and -webkit-text-fill-color: transparent.

That gives you the snippet at the top of this page.

Step 3: Fix common layout problems

The gradient only covers part of a short heading. A block element like h1 is as wide as its container, so the gradient stretches across the whole width and a short heading shows little more than the first colour. Shrink the element to its text:

.gradient-text { display: inline-block; }
/* or */
.gradient-text { width: fit-content; }

Multi-line text looks odd. On an inline element that wraps, each line can get its own slice of the gradient. Use display: inline-block for a single gradient across all lines, or add box-decoration-break: clone (with the -webkit- prefix) if you want each line to show the full gradient.

The descenders are cut off. Letters like g and y can be clipped if the line height is very tight. Add a little padding-bottom or loosen line-height.

Emoji turn into solid gradient blobs. That's the clip working as designed. Wrap emoji in a separate span that resets the effect.

Step 4: Add a safer fallback with @supports

If you want the solid colour to be guaranteed wherever clipping isn't supported, wrap the effect:

.gradient-text { color: #2f5bff; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #2f5bff 0%, #7b2cbf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Browsers that understand the clip get the gradient; anything else shows plain blue text.

Step 5: Check accessibility

Gradient text is still real text, so screen readers, search engines and copy-paste all work normally. The risk is contrast: one end of the gradient may be readable and the other not.

Check every colour stop against the background in the free color contrast checker. For the example above on white:

Stop	Ratio on white	Normal text AA (4.5:1)
#2F5BFF	5.17:1	Pass
#7B2CBF	7.10:1	Pass

Compare that with the generator's bright "Candy" preset (pink #FF7AC6 to yellow #FFE14D). On white, the stops measure 2.37:1 and 1.3:1, so that gradient fails as text even though it's lovely as a background. On a dark background, the same colours would pass.

More tips:

• Keep gradient text for headings and short phrases, not paragraphs.
• Don't put gradient text over a gradient or photo background; contrast becomes impossible to guarantee.
• In Windows' high contrast (forced colours) mode, the system replaces your colours; you can add @media (forced-colors: active) { .gradient-text { -webkit-text-fill-color: currentColor; } } to be sure the text stays visible.

If you need the stop colours in another format, such as RGB for a design tool, the free HEX to RGB converter converts them. For the difference between gradient types, see linear vs radial vs conic gradients.

Make your gradient now

Design it in the free CSS gradient generator, copy the CSS, and paste the gradient line into the snippet above. The generator runs on your device with no sign-up.