Skip to content
UI Kit
Accent color

Text accents

Gradient sweeps, shimmer, hand-drawn markers, rotating words and numbers that count up, for the one line that matters.

5 components · 16 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

highlight-marker

Highlight marker

An underline, a highlighter or a loop draws itself behind a phrase, as SVG in the accent color. The words stay plain text.

Props and details · Highlight marker

Underline

A hand drawn stroke below the phrase, its width follows the font size.

Marker

A highlighter draws behind the lower half of the words as you scroll, and wipes back when you scroll up.

Circle

One loop around the one word that matters, drawn in a single stroke.

In running text

Small sizes inside a paragraph: a quiet marker and an accent underline that draws again on hover.

gradient-sweep

Gradient sweep

A gradient built from the accent flows through the text. Pure CSS, paused off screen, still with reduced motion.

Props and details · Gradient sweep

Accent

The accent fades into a quiet grey and back, in a steady loop.

Spectrum on scroll

The accent and its two neighbours on the color wheel, moved by the scroll position instead of the clock.

Once

One sweep when the line scrolls in, then it rests. Ink palette, text color into the accent.

number-ticker

Number ticker

Counts up to a value when it scrolls in, formatted for the language with Intl and set in tabular digits. The final width is reserved from the start.

Props and details · Number ticker

Stats

Currency, percent and a plain count side by side, each in the format of the language.

Odometer

Every digit rolls through to its place, the columns settle from left to right. Pure CSS.

In a sentence, on scroll

Numbers inside running text count with the scroll position, the sentence never moves while they do.

rotating-words

Rotating words

One word in a sentence takes turns, the slot glides to the width of the next word, nothing jumps. Pauses off screen and on hover.

Props and details · Rotating words

Slide

Inside a hero line, the word slides up and out while the next one rises.

Pill and blur

A soft accent pill holds the word, its width follows each word, the words cross through a blur.

Flip on scroll

The scroll position picks the word, each one turns over the horizontal axis. Left aligned at the end of the line.

shimmer-text

Shimmer text

A light passes over the text. Pure CSS on the inherited color, paused off screen, still with reduced motion.

Props and details · Shimmer text

Status line

The step that is working right now shimmers, the others rest.

Headline on scroll

One pass of accent light over a large line, carried by the scroll position. At rest the line stands in full color.

On hover

Text links rest in full color, one pass of light on hover and keyboard focus.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Text accents on a page.

Often searched

Jump to

Copied to the clipboard