color

Gradient Text Generator

Create beautiful gradient text effects with live preview. Copy the CSS for any web project.

Text

Font size: 72px

Angle: 135°

First color

Second color

Gradient Text

.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
}

How to use Gradient Text Generator

1Paste your input in the panel above or use the example data if available.
2Choose an action — format, generate, convert, encode, or analyze.
3Your result appears instantly. Use Copy to grab it, or Download if a file option is shown.

Runs entirely in your browser

Nothing you type, paste, generate, or upload leaves your device.

Frequently asked questions

How does gradient text work?

Using background-clip: text combined with transparent text color in CSS.

Related tools

color

Color Picker & Converter

Pick and convert colors between formats.

colorpicker

color

CSS Gradient Generator

Generate CSS gradients.

gradientcss