thisdesign.space

CSS · 2400 ms

Text shimmer

A specular highlight sweeping diagonally across a line of text.

A gradient bound to the text via `background-clip: text` and animated by translating its position. Looks like light catching a polished surface as you tilt it. Cheap (one element, one keyframe), reads as premium. Use for hero headlines or any moment of brand luxury — and not for body copy.

byudaysinhudaysinh

Demo

Live demo

A specular highlight.

The demo runs the same CSS code shown below — replay to retrigger.

Code

The whole effect in CSS.css

.shimmer {
  background: linear-gradient(
    100deg,
    var(--ink) 40%,
    var(--shimmer, #fff) 50%,
    var(--ink) 60%
  );
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 2.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}