Pro

shimmer

PreviousNext

A CSS utility for Tailwind CSS that sweeps an animated shimmer across text.

The shimmer utility adds a continuous light sweep across text. It suits badges, loading labels, and short callout headings. It is a CSS snippet that you add to your own stylesheet; it is not part of any Jolocky item.

Installation

Add the keyframes and the utility to your global stylesheet (Tailwind CSS v4):

app/globals.css
@theme inline {
  --animate-shimmer: shimmer 2.5s linear infinite;
  @keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }
}
 
@utility shimmer {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, currentColor 40%, transparent) 0%,
    currentColor 50%,
    color-mix(in oklch, currentColor 40%, transparent) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: var(--animate-shimmer);
}

Basic Usage

Add the shimmer class to any text element. The sweep uses the element's text color, so set a color as usual:

<p className="shimmer text-lg font-medium text-foreground">
  Generating preview...
</p>

Accent Shimmer Badges

Combine shimmer with a badge:

<span className="inline-flex items-center rounded-full border border-border px-3 py-1 text-xs">
  <span className="shimmer font-semibold">New</span>
</span>

Reduced Motion Support

When a user enables reduced motion in their operating system settings, turn the animation off and show plain text:

app/globals.css
@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}