CSS Gradient Text Generator

Create stunning gradient text effects with multiple color stops

Gradient Text

Text Settings

Gradient Settings

%
%
%

        

How It Works

  1. Enter Text: Type your text content in the text input field.
  2. Add Colors: Click "Add Color Stop" to add more colors to your gradient.
  3. Adjust Direction: Use the direction slider to change the gradient angle.
  4. Copy Code: Click "Copy CSS" to get the gradient text code.

Unlimited Colors

Add as many color stops as you want for complex gradients.

Live Preview

See your gradient text update in real-time as you make changes.

Presets

Quick presets for rainbow, sunset, ocean, and neon gradients.

Linear & Radial

Choose between linear and radial gradient types.

Watch How It Works