Gradient underline

Studio call-to-action line: the link reads as body color with a coral-to-cream bar that thickens on hover.

We open registration for the spring residency next Tuesday—portfolio review optional.

Widely Supported

typographygradientno-js

Quick implementation

a.grad-line {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 40%, white));
  background-repeat: no-repeat;
  background-size: 100% 0.18em;
  background-position: 0 100%;
  box-decoration-break: clone;
}
a.grad-line:hover { background-size: 100% 0.32em; }

Prompt this to your LLM

Marketing sites and editorial CTAs.

You are styling an inline link with a gradient underline instead of text-decoration.

Goal: background-image linear-gradient as a horizontal bar under the text; grows on hover.

Constraints:
- Use background-size for bar height; background-position at bottom.
- box-decoration-break: clone for wrapped lines.
- Link text color matches surrounding paragraph (inherit).

Return CSS.

Why this matters in 2026

Brand gradients on underlines beat flat borders for expressive campaigns while staying selectable text.

The logic

Thin background strip mimics underline; animating background-size is cheap compositing.

Accessibility & performance

Ensure contrast between text and page background; add :focus-visible outline for keyboard users.