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.

Keep enough contrast between the gradient and the background, and avoid it for long body text; it works best on short headings.

CSS & Design

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

Free foreverRuns in your browserNo sign-up

Gradient

From colour

To colour

Angle90deg

background: linear-gradient(90deg, #6366F1, #EC4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

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.

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.

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.