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: 344 B

Presets & Samples

Preview Text

Start Color

#ff6b6b

End Color

#4ecdc4

Type

Angle: 45°

Middle color stop

Hello World

CSS Code

.gradient-text {
  display: inline-block;
  color: #ff6b6b;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    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. Every current browser supports it: Firefox since version 49, Safari since 14, and Chrome and Edge since 120, while older versions of Chrome and Edge understand only the prefixed -webkit-background-clip, so the CSS here writes both. It also keeps a solid color for browsers without the feature, applying the transparent fill only inside @supports, and sets display: inline-block so the gradient spans the words rather than the whole line. 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.

How it works in practice

A worked example

A front-end developer is rebuilding a mock-up's hero headline, whose words fade from indigo through purple to pink left to right, and wants it as CSS rather than an exported image.

Input

Preview Text       Ship it Friday
Start Color        #6366f1
End Color          #ec4899
Type               Linear
Angle              90°
Middle color stop  ticked, #a855f7

Output

.gradient-text {
  display: inline-block;
  color: #6366f1;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

The angle sets the direction the colours travel, and in CSS 0deg points up with larger angles turning clockwise, so 90deg runs the gradient from left to right across the words. None of the three stops carries a position, so the browser puts the first at 0% and the last at 100% and spaces the purple evenly between them, at exactly 50%. The preview text never reaches the CSS: the rule targets a class named gradient-text, so the heading on your page needs class="gradient-text", and the words Ship it Friday are only there to judge the colours. The first rule is the part every browser reads: display: inline-block, so the gradient spans the words, and a solid #6366f1, the start colour, which only a browser that cannot clip a background to text ever shows, because the @supports rule's transparent fill is skipped there.

The edge case that catches people

The gradient is set with the background shorthand, and a shorthand resets every background property it leaves out, background-clip included, which goes back to border-box. Inside this rule that is harmless, because both clip lines come after it, but any rule that overrides this one with the shorthand, such as a :hover state that swaps in brighter colours, resets the clip too: the gradient then fills the heading's whole box while the text stays transparent, so the words vanish into a coloured rectangle. The prefixed -webkit-background-clip line is no safeguard, because browsers keep it and background-clip as a single value. Write such overrides with background-image, which changes the colours and leaves the clip alone.

When not to use this tool

Reach for a fuller gradient editor when the design needs more than this offers. The colour fields are plain browser pickers that return opaque colours only, so every stop is solid. The stops are also always spaced evenly, there is room for one middle colour at most, and Radial is always a circle centred on the element. The site's CSS Gradient Generator sets a position and an opacity for each stop, and the gradient it produces can be dropped into this rule in place of the background value. For a logo or wordmark, an SVG whose text is filled with a linearGradient skips the clip altogether, and by default that gradient is measured against the bounding box of the text it fills, so it spans the word rather than its container.

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 the text was made transparent and the gradient never showed through: background-clip: text is unsupported or misspelled, or a later background shorthand reset the clip. A fallback color in the same rule cannot help, since color: transparent overrides it. Keep the transparent fill inside @supports.
Do I still need the -webkit- prefix?: Yes. Chrome and Edge took the unprefixed background-clip: text only in version 120, in December 2023, and Safari in 14, so -webkit-background-clip stays for older ones. -webkit-text-fill-color has no unprefixed name at all, and every current browser supports it as written.
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 gradient stretches across whatever width the block occupies. That is why the CSS here sets display: inline-block; width: fit-content does the same while keeping the heading on a line of its own.

Common errors and gotchas

Making the text transparent outside an @supports (background-clip: text) block. Where the clip is unsupported the words vanish, and a fallback colour earlier in the same rule cannot save them.
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.