---
name: gradient-text
description: Use when you want "Modern, premium, trendy" - Fills typography with a gradient instead of a flat color.
---

# Gradient Text

> **Category:** Text  -  **Personality:** Modern, premium, trendy
>
> **Best use:** Hero headlines, CTAs
>
> **Ratings:** Professional 5/5 - Casual 4/5 - Exotic 3/5 - Visual impact 4/5 - Difficulty 1/5 - Performance cost 1/5

## What it is

Gradient Text fills the **glyphs themselves** with a gradient instead of a flat color. You paint a `linear-gradient` (or radial/conic) as the element's `background`, clip that background to the shape of the text with `background-clip: text`, then make the text fill transparent so the gradient shows through the letters. It reads as modern, premium, and a little trendy, which is why it earns its keep on hero headlines, eyebrow badges, and CTAs.

This recipe is a **static** fill. (Animating the gradient's position is a separate effect — "Animated Gradient Text.") A subtle entrance fade is fine; the gradient itself does not move.

## Dependencies / CDN

**None - pure CSS.** The demo only loads display/body fonts (gradient text shines on big, bold type) — optional:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,900;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
```

## HTML

Fill only the key word(s) — leave the rest solid for contrast. Three tasteful variations:

```html
<!-- A) gradient badge / eyebrow -->
<span class="gt-eyebrow"><span class="gt-fill">&#10022; Prism 3.0 &mdash; the gradient engine</span></span>

<!-- B) multi-stop gradient headline (only the key line is filled) -->
<h1 class="gt-h">Every screen,<br><span class="gt-fill">in full spectrum.</span></h1>

<!-- C) gradient underline that wraps cleanly -->
<p class="gt-sub">&hellip;ship <span class="gt-underline">straight to production</span> &mdash; no flat handoffs.</p>

<!-- gradient text on a CTA -->
<button class="gt-link"><span class="gt-fill">Watch the 2-min tour</span> <span class="gt-fill">&rarr;</span></button>
```

## CSS

```css
:root{
  /* one cohesive multi-stop gradient, reused everywhere for a unified palette */
  --gt-grad: linear-gradient(100deg,#5eead4 0%,#7dd3fc 30%,#818cf8 62%,#f0abfc 100%);
  --gt-fallback: #9fb1ff;                 /* a mid-gradient tone */
}

/* THE EFFECT - paint the glyphs with the gradient */
.gt-fill{
  color: var(--gt-fallback);              /* fallback: shown if background-clip:text is unsupported */
  background-image: var(--gt-grad);
  -webkit-background-clip: text;          /* Safari/iOS need the prefix */
          background-clip: text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gt-fill{ color: transparent; -webkit-text-fill-color: transparent; }
}

/* gradient UNDERLINE - a gradient strip at the baseline (no clip; wraps across lines) */
.gt-underline{
  background-image: var(--gt-grad);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .12em;            /* thickness of the rule */
  padding-bottom: .04em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;    /* keep the strip on every wrapped line */
}

/* big, bold type gives the gradient room to read */
.gt-h{ font-family:'Fraunces',Georgia,serif; font-weight:900; font-size:clamp(44px,7vw,88px); line-height:.97 }
```

## JavaScript

Not required.

## How it works

- **`background-clip: text`** clips the element's painted background to the *shape of its glyphs* — so only the letters get painted, everything outside them is cut away.
- The text still has its own fill on top, which would hide the gradient — so the fill is set to **transparent** (`color: transparent`, and `-webkit-text-fill-color: transparent` in WebKit). Now the clipped gradient is what you see.
- Because it's a real `background`, **any** gradient works — multi-stop `linear-gradient`, `radial-gradient`, `conic-gradient`, even an image.
- The **underline** variation deliberately skips `background-clip: text`: it paints the same gradient as a thin strip via `background-size: 100% .12em` at the baseline, and `box-decoration-break: clone` keeps that strip correct when the text wraps to a second line.
- Everything references one **`--gt-grad`** variable, so headline, badge, underline, CTA, and the swatch panel all stay in sync.

## Customization

- **Direction / energy:** change the angle (`100deg`), or swap `linear-gradient` for `radial-gradient` / `conic-gradient`.
- **Stops:** 2 stops = a clean fade; 3-4 stops = a richer spectrum. Keep them in the same color family for cohesion (avoid the muddy middle where complementary hues meet).
- **Apply selectively:** fill only the key word(s) and leave the rest solid — more legible and more premium than gradient-filling whole paragraphs.
- **Underline weight:** `background-size: 100% .12em` (thin) up to `.2em` (chunky); raise `padding-bottom` to push it off the descenders.
- **Type:** gradients read best on heavy, large letterforms — thin or small text shows almost none of the sweep.

## Accessibility & performance

- **Always set a solid `color` fallback first** (this demo gates the transparent override behind `@supports`). Transparent text has no color of its own, so without a fallback it can vanish where `background-clip: text` is unsupported, and it can disappear in Windows **forced-colors / high-contrast** mode.
- Check contrast against the **darkest and lightest** points of the gradient, not just the middle.
- Keep the real text in the DOM (don't bake it into an image) so it stays selectable, translatable, and screen-reader friendly.
- It's cheap to paint (no blur or filters), so performance cost is negligible — but reserve it for headlines/CTAs where it strengthens hierarchy, not body copy where it hurts readability.

## Gotchas

- **Needs the `-webkit-` prefix.** Without `-webkit-background-clip: text`, Safari/iOS render a transparent (invisible) headline.
- `background-clip: text` clips the **background**, so the element must carry a `background-image`/gradient — a plain `color` won't clip.
- In WebKit, **`-webkit-text-fill-color` wins over `color`** — set the *fill* to transparent there, not just `color`, or the gradient won't show.
- The gradient is sized to the **element's box**: a multi-line filled heading sweeps the whole block, and an inline `.gt-fill` only spans its own width. Size/position the box if you want a specific slice of the gradient.
- **Don't animate `background-position`** here — that's the separate "Animated Gradient Text" effect. This recipe is a static fill.