Back to library
INTERACTION_019

Shimmer Text.

A background-clip: text gradient animates its background-position, creating chrome moving through the type.

CATEGORY
Typography
COMPLEXITY
Easy
TECH
CSS
PLATFORM
Both
PERFORMANCE
Light
LIVE PLAYGROUND
CHROME TEXT
CSS / CSS
.shimmer {
  background: linear-gradient(100deg, #686868 30%, #ffffff 50%, #686868 70%);
  background-size: 200% 100%;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

IF YOU LIKE THIS, STEAL THESE TOO.

MOVEDIFFERENT.
INTERACTION_018CSS

Headline Reveal

Lines rise out of a clipped mask, one after another.

Typography / LightView
0COPY ACTIONS
INTERACTION_021CSS + JS

Count-Up Number

Metrics animate from zero when scrolled into view.

Typography / LightView
INTERACTION_001CSS

Premium Button Lift

Weightless 2px rise with an edge highlight on hover.

Buttons / LightView
INTERACTION_002CSS

Shine Sweep Button

A diagonal chrome glint travels across the surface on hover.

Buttons / LightView