CSS Gradient Text Generator

Create stunning gradient text effects. Multiple colors, animation, copy instantly.

⌘+C Copy CSS⌘+T Tailwind⌘+S Save⌘+R Random
Gradient Text
CSS Code
.gradient-text {
  font-size: 48px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0px;
  background-image: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

}
#667eea
#764ba2
#f093fb

Gradient Presets (15)

Frequently Asked Questions

Common questions about Gradient Text

01

What is gradient text?

02

How do I use gradient text?

03

Does gradient text work in all browsers?

04

Can I animate gradient text?

05

What fonts work best with gradient text?

06

Can I use more than 3 colors?