Skip to content
ToolsOnDuty - free online tools
CSS & Design

CSS Text Gradient Generator

Create gradient-coloured text with background-clip and copy the CSS.

Free browser toolRuns in your browserNo sign-up
Gradient
background: linear-gradient(90deg, #6366F1, #EC4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

About the CSS Text Gradient Generator

Gradient text uses a background gradient clipped to the shape of the letters for a modern, eye-catching heading.

This tool lets you pick two colours and an angle, preview the gradient text live, and copy the CSS.

It runs in your browser.

Key features

  • Two-colour gradient text
  • Adjustable angle
  • Live preview
  • Copy the CSS

How to use

  1. 1Pick two colours and an angle.
  2. 2Preview the gradient text.
  3. 3Copy the CSS.

Examples

Gradient heading
Output: background: linear-gradient(90deg, #6366F1, #EC4899); background-clip: text;

The gradient shows through the text because the colour is transparent and the background is clipped to the letters.

Frequently asked questions

How does gradient text work?
A gradient is set as the background, then background-clip: text and a transparent colour clip the gradient to the letter shapes.
Do I need the -webkit- prefix?
Yes, for the widest support. The output includes both -webkit-background-clip and background-clip.
Is gradient text accessible?
Keep enough contrast between the gradient and the background, and avoid it for long body text; it works best on short headings.

Continue your workflow

Open a related tool to prepare your files or refine the finished result.