Live PreviewColor PresetsCopy CSSFree
Gradient Text
CSS
.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 48px;
  font-weight: 800;
}

Frequently Asked Questions

How does gradient text work in CSS?
It uses background-clip: text combined with -webkit-text-fill-color: transparent to make the gradient show through the text.
How many colors can I use?
You can use 2 to 6 color stops. Click "Add Color" to add more gradient stops.
Is this compatible with all browsers?
Yes, gradient text works in all modern browsers. The -webkit- prefix ensures Safari compatibility.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools