typographybeginner

Gradient Text

Apply gradient colors to text for eye-catching headings.

Preview

Gradient Heading

Tailwind Classes

bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent

CSS Code

.gradient-text {
  background: linear-gradient(90deg, #9333ea, #db2777, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

HTML Example

<h1 class="text-4xl font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
  Gradient Heading
</h1>

Use Cases

Hero headingsBrand textCall-to-actionsFeature titles

Browser Support

All modern browsers (prefixes may be needed)

#gradient#text#typography#heading