Gradient Text Generator

Create stunning gradient text effects. Copy CSS, download PNG or SVG. No signup required.

Gradient Text
24px120px
#1
#2
.gradient-text {
  font-size: 72px;
  font-family: sans-serif;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(to right, #EC4899, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Last updated: March 2026

About Colorful Text Maker

Create stunning gradient and rainbow text with custom colors, fonts, and directions. Choose from 14 preset gradients or build your own. Export as PNG for social media, SVG for print, or CSS for web projects.

Frequently Asked Questions

What export formats are available?

Copy CSS code, download as PNG image, download as SVG vector, or copy as an HTML snippet.

Can I use multiple colors?

Yes. Add 2-4 color stops to create custom multi-color gradients with various directions.