🎨

Gradient Text Generator

gradient · text · css · color · webkit

Text

Color 1Color 2Color 3 (opt)

AngleFont SizeWeight

Gradient Text

CSS

.gradient-text {
  background-image: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 700;
}

How to use

1
Enter text and pick 2-3 colors.
2
Adjust angle, size and weight.
3
Copy the generated CSS.

FAQ

Is this tool free?

Yes — no sign-up, no installation, completely free to use right away.

What is this tool?

This tool creates smooth color gradients and gives you the CSS to use them. Adjust the colors and direction visually, then copy the code straight into your site. It runs entirely in your browser.