← Visual Library / Typography

Gradient text accent

A word or short phrase rendered with a flowing color gradient. Used to emphasize the verb in a headline ('that actually ships').

Typography Built

Use when — you want one or two words in a headline to draw the eye without bolding everything. Pairs naturally with the brand's accent colors.

Live demo

Data, automation, and AI that actually ships.

CSS

.grad-word {
  background: linear-gradient(110deg, var(--green) 0%, var(--mint) 50%, var(--green) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: flow 6s ease-in-out infinite;
}
@keyframes flow {
  0%, 100% { background-position: 0%   50%; }
  50%      { background-position: 100% 50%; }
}

How it works

The element has a gradient background, then we set the text color to transparent and clip the background to the text shape. The visible color is the gradient showing through the text.

The animation slides the gradient position back and forth across the text — giving the flowing-shimmer effect. Without animation, it's still a gradient but static.

Browser support

-webkit-background-clip: text is the prefixed property — required for Safari. The unprefixed background-clip: text covers everything else. Always include both.

Dials

Static gradient (no animation): drop the animation and background-size: 200%. Just looks polished.

Animation speed: 6s feels meditative. 3s feels nervous. Don't go faster than 3s — distracting.

Angle: 110deg reads natural for left-to-right languages. 90deg is purely horizontal (looks flat).

Don't

Don't apply to large bodies of text — readability tanks. Reserve for 1–2 words in a headline.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.