Gradient Text

Gradient Text Generator

Turn any text into a two-color gradient heading with a live preview and copy-ready CSS.

Text

Start color

End color

Gradient angle 135°

Live preview

Requires browser support for background-clip: text

Build linear, radial and conic CSS gradients visually.

Hundreds of curated CSS gradients; one click copies the linear-gradient code.

Generate harmonious palettes from color theory, lock and export.

📘

The gradient text generator turns any text into a two-color gradient heading with a live preview and copy-ready CSS.

Type your text, pick a start and end color, and tune the angle to see the gradient text.
Tap Swap colors to flip start/end; the preview updates instantly.
Copy the CSS straight into your project. Gradient text relies on background-clip:text, so very old browsers fall back to a solid color.

💡

Hues 120°-160° apart read most naturally; closer hues look flat.
Use gradient text for headlines only - body copy stays solid for readability.
The exported CSS uses background-clip: text; keep a fallback color for older browsers.