CSS Gradient Text

CSS gradient text is one of the most popular design techniques for headings, logos, and hero sections. Instead of a solid color, the text appears to be filled with a smooth color transition — from blue to purple, pink to orange, or any combination you choose. This generator lets you build that effect visually and get the exact CSS code instantly.

How to Use the Generator

1. Type your text in the Preview text field to see a live preview.
2. Select Linear or Radial gradient type.
3. For linear gradients, drag the Angle slider to rotate the gradient direction.
4. Adjust the color stops — pick colors and set the position percentage for each.
5. Click Add stop to add more colors for complex multi-color gradients.
6. Tune font size, weight, and family to match your design.
7. Switch the Preview background to see how the text looks on light or dark backgrounds.
8. Click Copy CSS and paste the code into your stylesheet.

How CSS Gradient Text Works

The effect uses three CSS properties working together:

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

Linear vs Radial Gradient

Linear gradient flows in a straight line at a chosen angle. 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom. This is the most common type for text.

Radial gradient radiates outward from a center point (here: ellipse at center). It works well for short text or logos where you want a glowing center effect.

Color Stop Positions

Each color stop has a position from 0% (start) to 100% (end). By default two stops are placed at 0% and 100%. Adding a third stop at 50% creates a three-color gradient. You can cluster stops close together to create sharp transitions, or space them far apart for gentle blends.

Browser Compatibility

The -webkit-background-clip: text property is supported in all modern browsers — Chrome, Edge, Safari, Firefox (since Firefox 122 removes the need for a flag), and Opera. The -webkit- prefix is still needed for Safari compatibility. The generated CSS includes both the prefixed and unprefixed versions for maximum compatibility.

Tips for Great Gradient Text

• Contrast matters: Gradient text can be hard to read on certain backgrounds. Use the preview background switcher to test readability.
• Bold weights look best: Thin text has less surface area for the gradient to show through. Weights of 700–900 give the most visual impact.
• Limit colors for readability: Two or three colors are usually ideal. More than four stops can make text look muddy.
• Angle matches flow: Diagonal gradients (135deg) on left-aligned text add energy; horizontal gradients (90deg) work well for centered headings.