Text Gradient

1. Gradient Type

2. Direction

deg

3. Animate

Duration (higher = slower)

4. Text & Font

Text content

Font family

Font weight

Font size

5. Color Stops

Popular Presets

CSS

background: linear-gradient(135deg,
  #6366f1 0%,
  #ec4899 50%,
  #f59e0b 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-family: system-ui, -apple-system, sans-serif;
font-size: 72px;
font-weight: 800;

About CSS Text Gradient Generator

Apply beautiful color gradients to text. Customize colors, direction, stops, and typography, add a flowing color animation, then copy the CSS instantly.