ZeroServer.tools

CSS Text Gradient Generator

Create gradient text with live preview. Copy the CSS or Tailwind snippet — no extra tools needed.

From color

To color

Direction

Font size (px)

Font weight

Preview text

Gradient Text

CSS

.gradient-text {
  background: linear-gradient(to right, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 48px;
  font-weight: 700;
  display: inline-block;
}

Tailwind snippet

<span class="bg-clip-text text-transparent" style="background-image: linear-gradient(to right, #7c3aed, #ec4899)">
  Your text here
</span>

CSS text gradient generator

CSS gradient text works by painting a linear-gradient as the background of the element, then clipping it to the text shape with -webkit-background-clip: text and -webkit-text-fill-color: transparent. The display: inline-block ensures the background area matches the text bounds. You can achieve the same in Tailwind with the bg-clip-text and text-transparent utilities.

Private & free — this tool runs entirely in your browser.