🎨 CSS Gradient Text Generator
By ToolNimba Web Dev Team · Updated 2026-06-19
Adjust the colors and angle. The preview and CSS update live.
This gradient text generator builds colorful gradient text for the web without any image editor. Pick two or more colors, set the gradient angle, type your sample text, and watch the live preview update as you go. When it looks right, copy the ready-made CSS, which uses a linear-gradient as a background image clipped to the shape of the text. Paste it into your stylesheet and your heading or logo text picks up the gradient straight away.
What is the Gradient Text Generator?
Gradient text is plain text that is painted with a color gradient instead of a single flat color. CSS cannot fill the glyphs of text with a gradient directly, so the standard trick is to set the gradient as the element's background-image, then clip that background to the text outline with background-clip: text (and the -webkit-background-clip: text prefix for wider support). Finally, the text color is set to transparent so the clipped gradient shows through the letter shapes instead of the solid font color.
The gradient itself is a linear-gradient: a smooth blend between two or more color stops along a line. The angle controls the direction of that line, where 0 degrees runs bottom to top, 90 degrees runs left to right, and 180 degrees runs top to bottom. Each color stop has a color and a position from 0% to 100%, so you can decide exactly where one color hands over to the next. Adding more stops lets you build rainbow or multi-tone effects across a single word or heading.
Because the effect relies on background-clip: text, three properties always travel together: the background-image holding the gradient, the background-clip (with its -webkit- prefix) set to text, and color set to transparent. Leave any one out and you either see a solid color, a full-width background block, or no visible text at all. This tool always outputs the full, correct set so you can copy and paste with confidence.
When to use it
- Styling a hero heading or landing-page title with an eye-catching color blend.
- Building a text-based logo or brand wordmark that uses your brand gradient.
- Highlighting a single keyword or call-to-action phrase inside a block of text.
- Prototyping color combinations quickly before committing them to a design system.
How to use the Gradient Text Generator
- Pick your first and second colors using the color swatches.
- Drag the angle slider to set the gradient direction in degrees.
- Type the words you want to preview into the sample text box.
- Add more color stops or adjust their positions for multi-color effects.
- Copy the generated CSS and paste it onto your text element.
Formula & method
Worked examples
A two-color purple-to-pink gradient running left to right across a heading.
- Set color 1 to #7c3aed at 0% and color 2 to #ec4899 at 100%.
- Set the angle to 90 degrees so the blend runs left to right.
- background-image: linear-gradient(90deg, #7c3aed 0%, #ec4899 100%)
- Add -webkit-background-clip: text and background-clip: text.
- Set color: transparent so the gradient shows through the letters.
Result: Heading text fades from purple on the left to pink on the right.
A three-color diagonal gradient with a teal stop in the middle.
- Use color stops #7c3aed at 0%, #22d3ee at 50%, and #ec4899 at 100%.
- Set the angle to 45 degrees for a diagonal sweep.
- background-image: linear-gradient(45deg, #7c3aed 0%, #22d3ee 50%, #ec4899 100%)
- Apply -webkit-background-clip: text, background-clip: text, color: transparent.
Result: Text blends purple to teal to pink along a diagonal line.
What each linear-gradient angle does to the blend direction
| Angle | Direction of the gradient |
|---|---|
| 0deg | Bottom to top |
| 45deg | Bottom-left to top-right (diagonal) |
| 90deg | Left to right |
| 135deg | Top-left to bottom-right (diagonal) |
| 180deg | Top to bottom |
The three CSS properties needed for gradient text
| Property | Purpose |
|---|---|
| background-image | Holds the linear-gradient that supplies the colors. |
| background-clip: text | Clips the background so it only shows inside the text shape. |
| -webkit-background-clip: text | Prefixed version for Safari and Chromium browsers. |
| color: transparent | Hides the solid font color so the gradient shows through. |
Common mistakes to avoid
- Forgetting color: transparent. If the text keeps its normal color, the solid color paints over the clipped gradient and you never see it. Always set color to transparent so the background gradient shows through the letters.
- Dropping the -webkit- prefix. Many browsers still rely on -webkit-background-clip: text. Include both -webkit-background-clip and the unprefixed background-clip so the effect works across Chrome, Safari, Edge, and Firefox.
- Using background-color instead of background-image. A gradient is an image, not a color. Setting it with background-color does nothing. Use background-image (or the background shorthand) so the linear-gradient is treated as an image to clip.
- Expecting good contrast for body text. Gradient text can be hard to read at small sizes and may fail color-contrast checks. Reserve it for large headings or short accents, and keep long paragraphs in a solid, accessible color.
Glossary
- Linear gradient
- A smooth transition between two or more colors along a straight line set by an angle.
- Color stop
- A single color plus its position (0% to 100%) along the gradient line.
- background-clip: text
- A CSS property that clips an element background so it is only painted inside the text shape.
- Angle
- The direction of a linear gradient in degrees, where 90 degrees runs left to right.
- Vendor prefix
- A browser-specific property name such as -webkit- used while a feature is still being standardized.
Frequently asked questions
How do I make gradient text in CSS?
Set a linear-gradient as the element background-image, add -webkit-background-clip: text and background-clip: text, then set color: transparent. The gradient is clipped to the text shape so the letters show the gradient. This tool outputs all four lines ready to copy.
Why is my gradient text invisible?
The most common cause is leaving color: transparent in place without applying background-clip: text, or vice versa. You need the gradient as background-image, both background-clip and -webkit-background-clip set to text, and color set to transparent together for the effect to appear.
Do I still need the -webkit- prefix?
Yes, it is safest to include it. Several browsers still implement the feature through -webkit-background-clip: text. Adding both the prefixed and unprefixed properties gives the widest compatibility across Chrome, Safari, Edge, and Firefox.
Can I use more than two colors?
Yes. Click Add color to insert extra color stops, and set each stop position from 0% to 100%. Multiple stops let you build rainbow or multi-tone gradients that blend across a single heading or word.
What does the angle value control?
The angle sets the direction of the linear gradient. 0 degrees runs bottom to top, 90 degrees runs left to right, 180 degrees runs top to bottom, and 45 or 135 degrees give diagonal blends. Drag the slider to see the preview change.
Is gradient text good for accessibility?
Use it carefully. Gradient text can lower contrast and become hard to read, especially at small sizes, so it may fail color-contrast guidelines. Reserve it for large headings or short accents and keep body copy in a solid, accessible color.