CSS Text Gradient Generator

Create gradient text with CSS

The Text Gradient Generator makes eye-catching gradient text — the kind you see in modern headings and hero sections — with custom colors and an adjustable angle. Type your text, pick two colors, and copy the CSS. A live preview shows exactly how it looks, all in your browser.

How gradient text works

The effect uses a clever CSS trick: you set a gradient as the element's background, clip that background to the shape of the text with background-clip: text, and make the actual text color transparent so the gradient shows through. The result is text "painted" with a gradient — no images required.

How to use it

1. Enter your text.
2. Pick the two gradient colors and an angle.
3. Copy the generated CSS and apply it to your heading.

The CSS it generates

Property	Role
background	The gradient that fills the text
-webkit-background-clip: text	Clips the gradient to the letters (Safari/Chrome)
background-clip: text	Standard property
color: transparent	Lets the gradient show through

Browser support

Gradient text works in all modern browsers, with the -webkit- prefix included for the widest compatibility — which the generated CSS provides. For older browsers that don't support background-clip on text, set a solid fallback color so the text remains readable rather than invisible.

Design tips

• Use gradient text sparingly — on a hero heading or logo, not body text.
• Keep the two colors related (analogous) for an elegant look, or contrasting for punch.
• Ensure enough contrast with the background so the text stays legible.
• Pair it with a bold, large font where the gradient has room to show.

Private and free

Everything runs in your browser with a live preview — nothing is uploaded. The tool is completely free with no sign-up.