Gradient Text Generator

Gradient text generator for CSS, Tailwind and SCSS

This free gradient text generator colors your text with a CSS gradient, shows it live on a background you choose, and gives you the code to copy. Pick your color stops, angle, font, weight and size, then export CSS, Tailwind CSS, SCSS or inline HTML. It runs in your browser and needs no signup.

Gradient text suits hero headlines, logos, section titles and landing page highlights. The tool also checks the contrast of your gradient against the preview background, so a pretty headline does not become an unreadable one.

How to make gradient text step by step

1. Edit the colors under Text Gradient Colors. Use the color picker or type a HEX value, and set each stop position in percent.
2. Use Add color stop to add more colors, up to 8 in total. Drag the grip handle to reorder stops, or press Even, Reverse or Random for a quick start.
3. Drag the Angle slider from 0 to 360 degrees, or click one of the eight direction shortcuts.
4. Type your words into Sample text (up to 80 characters), then choose a font family, font weight and font size.
5. Set the Preview background to the color your text will sit on, and read the contrast message under the preview.
6. Open the CSS, Tailwind CSS, SCSS or HTML inline tab and press the copy button.

Gradient text settings you can control

• Color stops: 2 to 8 colors, each with its own position from 0% to 100%. Stops are kept in position order, so the code always reads in sequence.
• Angle and direction: a 0 to 360 degree slider plus shortcuts for the eight compass directions. 90 degrees runs left to right, 180 degrees runs top to bottom.
• Fonts: Inter, Poppins, Playfair Display, Roboto, Montserrat, Lora, Bebas Neue, Oswald, Raleway, Source Sans 3, System sans and Georgia. The weight list only shows weights the chosen font really has.
• Size: 12px to 200px, shown next to the slider.
• Preview background: any color you pick or type, so you test the gradient where it will actually appear.
• Quick actions: Copy CSS, Copy HTML, Random gradient and Share link. The share link restores your exact design later.

How does CSS gradient text work?

CSS gradient text paints a gradient as the element background, clips that background to the letter shapes, and makes the normal text fill transparent. The key property is background-clip: text. The gradient itself comes from linear-gradient().

A shortened version of the CSS the tool produces looks like this:

.gradient-text {
  display: inline-block;
  color: #FFD93D; /* fallback */
  background-image: linear-gradient(90deg, #FF6B6B 0%, #FFD93D 50%, #6BCB77 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

The full output also includes your font family, size, weight and line height. For Google fonts it adds the matching import line for the weight you picked.

Gradient angle and direction shortcuts

CSS measures the gradient angle clockwise from the top, so 0deg points up. The eight shortcut buttons map to these values:

• 0deg is the same as to top, and 180deg is to bottom.
• 90deg is to right, and 270deg is to left.
• 45deg is to top right, and 135deg is to bottom right.
• 225deg is to bottom left, and 315deg is to top left.

Any angle between these, such as 110deg, is available from the slider.

Why gradient text needs a solid color fallback

The color line is a fallback for browsers that cannot clip a background to text. The tool sets it to the gradient color at the 50% mark, so the headline still shows a sensible color instead of disappearing. Current browsers support the effect, and the -webkit- lines keep older Safari and Chromium versions working.

Why gradient text uses inline-block

The generated code uses display: inline-block so the gradient stretches across the width of the text. On a full-width block element, the gradient would spread across the whole container, and short text would only show the first part of your colors.

Gradient text output formats compared

The generator gives you four ready-to-paste formats. Choose the one that matches how your project is styled.

Need a Tailwind color palette to start from? Browse the Tailwind CSS color reference and paste a HEX value into any stop.

How Tailwind gradient text classes are built

The Tailwind output uses an arbitrary background value that holds the full linear-gradient(), so your exact angle and stop positions are kept. Two standard utilities finish the job: bg-clip-text clips the background to the letters and text-transparent reveals it. Size, weight and font family are added as extra classes.

How does the gradient text contrast check work?

The contrast check samples the gradient along its whole length and reports the lowest contrast ratio against your preview background. That worst case decides whether every letter is readable. The tool compares it with the WCAG AA minimum from WCAG 2.2 Success Criterion 1.4.3.

Two thresholds apply. Large text needs at least 3:1, and the tool treats text as large at 24px or bigger, or at about 18.66px with a weight of 700 or more. Smaller text needs 4.5:1.

When the ratio falls short, the message tells you to adjust the lightest or darkest stop. Fix it by darkening one end of the gradient or changing the background. You can also run exact pairs through the WCAG contrast checker.

The check compares against one flat background color. If your text sits on a photo or another gradient, test it on the real page as well.

Gradient text design tips and common mistakes

• Keep stops close in brightness. A gradient from pale yellow to deep purple often fails contrast at one end. Pick colors with a similar lightness, or darken the weak stop.
• Use heavy weights. Thin strokes lose their color definition. Choose 600 to 900 where the font allows it.
• Limit stops to two or three. More colors in a short word look busy. Use Even to space them cleanly.
• Do not use it for body text. Reserve gradient text for headlines and short labels.
• Match the angle to the word shape. A 90 degree gradient suits wide headlines. A diagonal angle like 135 degrees adds depth to short words.
• Test the preview background first. A gradient that looks great on dark navy can vanish on white.
• Keep the fallback. Do not delete the solid color line, and do not set it to the same color as your background.

Choosing colors for smooth gradient text

Neighboring hues on the wheel, such as blue to violet, blend smoothly. Opposite hues can look muddy in the middle. Try the color harmonies generator to find stops that work together, or press Random for harmonious suggestions.

How to share or reuse a gradient text design

The gradient text generator keeps your work easy to revisit. Press Share link to copy a URL that restores your stops, angle, font, weight, size, background and text. Use Copy CSS or Copy HTML when you only need the code.

A worked example: three stops at #FF6B6B (0%), #FFD93D (50%) and #6BCB77 (100%) at 90 degrees give a coral, yellow and green sweep from left to right. Move the yellow stop to 30% and the coral fades out sooner, while the green takes a longer share of the word.

Where to use gradient text in your design

Gradient text works best as an accent. Use it on one key word in a headline, a logo wordmark, a pricing highlight or a section label. Keep the surrounding text in a solid color so the gradient stays the focal point.

Pair it with a clear typeface. Bold geometric fonts such as Poppins or Montserrat show gradients well, while Playfair Display gives a more editorial feel. If you need help choosing a second font, the font pairing generator suggests combinations.

Want movement? The animated gradient generator builds shifting gradient backgrounds. For a plain gradient on any surface, use the CSS gradient generator.

Checking your gradient text before you publish it

Paste the code into your page, then reopen the gradient text generator if you need to tweak a stop. Next, check the headline on a real phone and desktop screen. If the gradient feels too flat, add a softer background with the CSS mesh gradient generator and recheck the contrast.