CSS Tricks
CSS Trick

Gradient Text

Colorful gradient headlines with pure CSS - no images required.

#css #gradients #typography #text-effects

Browser Support

✓ Chrome 4+ ✓ Firefox 49+ ✓ Safari 5+ ✗ Edge

Gradient Text

Apply gradients to text using background-clip.

h1 {
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  background-clip: text;
  color: transparent;
}

Live Demo

Gradient Text
INTERACTIVE
#8b5cf6
#06b6d4
90deg
CSS Code
.gradient-text {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Use the controls above to adjust the gradient colors and angle in real-time.

Share this CSS trick

Comments