CSS Gradient Text Generator

Text

Color 1

#ff0080

Color 2

#7928ca

Angle: 90°

Gradient Text

.gradient-text {
  background: linear-gradient(90deg, #ff0080, #7928ca);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

How to Use

Enter your text, pick two colors using the color pickers, and adjust the gradient angle with the slider. The preview updates in real time. Copy the generated CSS code to use in your project.

How CSS Gradient Text Works

CSS gradient text uses a combination of background gradient, background-clip: text, and transparent text color. The gradient is applied as the background of the text element, then clipped to only show through the text shape. This technique works in all modern browsers.

Common Use Cases

Creating eye-catching headings for websites and landing pages.
Designing gradient logos and brand text elements.
Adding visual flair to hero sections and banners.
Styling social media graphics and promotional content.
Building modern UI components with gradient accents.

Tips

Use contrasting colors for the most visible gradient effect.
Gradient text works best on large, bold headings — thin text may lose the effect.
The -webkit prefix is still needed for Safari compatibility.
Try angles like 45°, 90°, or 135° for diagonal effects.
Pair gradient text with a solid-color background for maximum readability.

Privacy

All CSS generation happens in your browser. No data is sent to any server.