Gradient text

Fill text with a CSS gradient using background-clip, with adjustable colors and angle.

text
gradient
background-clip
typography

Color 1#6b46ff

Color 2#00e5ff

Angle90deg

HTML

<h1 class="grad-text">Gradient text</h1>

CSS

:root {
    --c1: #6b46ff;
    --c2: #00e5ff;
    --angle: 90deg;
}

.grad-text {
    font-size: 52px;
    font-weight: 800;
    background: linear-gradient(var(--angle), var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

How it works

The text becomes a “window” onto a gradient:

A linear-gradient is set as the element’s background.
background-clip: text clips that background to the shape of the glyphs.
-webkit-text-fill-color: transparent (plus color: transparent as a fallback) makes the actual text color see-through, so the gradient shows through the letters.

Always include the -webkit- prefixes — Safari and Chromium still require them for background-clip: text.