Gradient Text Generator

Generate CSS gradient text effects with customizable colors, angles, and gradients. Preview the result live and copy the CSS code.

Type: LINEARStart: #ff6b6bEnd: #4ecdc4Angle: 45°CSS Size: 194 B

Presets & Samples

Preview Text

Start Color

#ff6b6b

End Color

#4ecdc4

Type

Angle: 45°

Middle color stop

Hello World

CSS Code

.gradient-text {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

About Gradient Text Generator

CSS gradient text is created by applying a gradient as a background, then clipping it to the text shape using background-clip: text and making the text fill transparent. The result is text that appears to have a multi-color gradient. This works in all modern browsers (Chrome, Firefox, Safari, Edge). The -webkit- prefixes are still required for Safari compatibility. Linear gradients go from one point to another at a specified angle, while radial gradients radiate outward from the center.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a gradient heading without an image.
Getting the background-clip declarations a gradient text effect needs.
Comparing gradient angles on the same text.
Producing a gradient for a hero heading that has to carry the page's identity.
Building a gradient that uses theme colours.

Frequently Asked Questions

How is a gradient applied to text?: By painting a gradient as the element's background and clipping it to the glyph shapes with `background-clip: text`, then making the text itself transparent so the background shows through. The text is still real text — it is the fill that changes.
Why does the text disappear entirely sometimes?: Because `color: transparent` is applied without the clip taking effect. If `background-clip: text` is unsupported or misspelled, or the background never painted, the transparent colour is all that remains. A fallback `color` declared before the transparent one is the safe pattern.
Do I still need the -webkit- prefix?: Yes, for the widest support — `-webkit-background-clip: text` alongside the unprefixed property. It is one of the longest-lived prefixes still doing real work, because the feature shipped in WebKit years before it was standardised.
Is gradient text accessible?: It is real text, so it is selectable and readable by assistive technology. The risk is contrast: a gradient means the contrast ratio varies across the word, and the lightest point is the one that has to pass. Measuring only the midpoint is how gradient headings fail an audit.
Why does the gradient look different on a long heading?: Because the background is sized to the ELEMENT, not the text, so the same gradient stretches across whatever width the block occupies. Setting the element to `display: inline-block` or `width: fit-content` makes the gradient span the words rather than the line.

Common errors and gotchas

Omitting a fallback text colour, which leaves the text invisible where the clip is unsupported.
Failing contrast at one end of the gradient, since the ratio varies across the text.
Applying it to body text, where the effect hurts legibility.
Forgetting the `-webkit-` prefixed properties, which some browsers still require.
Assuming the gradient scales with the text, when it is sized to the element.