Gradient Text Generator

Gradient text that makes headlines stand out.

Preview

LightDark

Gradient Text

Settings

Text style
Type
LinearRadialConic

Color stops

Presets
Output
.gradient-text {
  font-family: system-ui, sans-serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: normal;
  background-image: linear-gradient(90deg, #fef3c7 0%, #fbbf24 60%, #d97706 100%);
  background-clip: text;
  color: transparent;
}

What is the Gradient Text Generator?#

The Gradient Text Generator fills text with a gradient and gives you the CSS to reproduce it. Enter a heading, choose a font and colors, and the preview updates as you type. The result is a .gradient-text rule built on background-clip: text, ready to paste into a stylesheet.

The text you enter is for the preview only. The copied CSS styles a class, so the same snippet works for any element you apply it to.

How to Use#

  1. Enter the text you want to preview.
  2. Set the font, weight, size, and letter spacing.
  3. Build the gradient yourself or start from a preset: pick a type, adjust its angle or origin, and arrange the color stops.
  4. Copy the CSS.

The preview background (Light or Dark) only changes how the preview looks, so you can check the gradient on a light or dark page.

Settings#

  • Text: The text to preview, shown on one line. Long text wraps to the next line.
  • Font and weight: A system font or one of the Google fonts. The weights you can pick follow the chosen font.
  • Size and letter spacing: The font size and the space between letters, both in pixels. Negative letter spacing tightens the text.
  • Presets: Ready-made gradients. Choosing one replaces the current gradient.
  • Gradient: Linear, radial, or conic, with color stops you can add, move, and delete.
  • Preview background: Light or Dark, for checking the gradient on different page tones. It is not part of the output.

Common Use Cases#

  • A hero heading that fades from one brand color into another.
  • Gradient titles on a landing page or feature section.
  • Text that picks up the colors of a logo or a product theme.
  • A reusable gradient-text class for headings across a site.

FAQ#

  • Generator

Last updated:

Related tools