Tailwind CSS v4 Plugin

tw-shimmer

Zero-dependency CSS-only shimmer. Simple, beautiful, and lightweight.

Installation

npm install tw-shimmer

styles/globals.css

@import "tailwindcss";
@import "tw-shimmer";

Text Shimmer

Add shimmer effects to text elements.

💡 Important

You won't see the shimmer if your text color is blackwhite. Set a lighterdarker or semi-transparent text color.

shimmer

Base utility for shimmer effect. Requires text color to be visible.

<span class="shimmer text-foreground/60">Shimmer Effect</span>

Shimmer Effect

shimmer-invert

Fades text lighterdarker instead. Allows you to use darkerbrighter text colors and still get a stark shimmer effect.

<span class="shimmer shimmer-invert text-foreground/60">Shimmer</span>

Shimmer Effect

Automatic Color

Shimmer automatically picks a color based on your text color.

<span class="shimmer text-blue-600">Blue Shimmer</span>

Blue Shimmer

shimmer-color-{color}

Override the automatic color with a custom shimmer color.

<span class="shimmer shimmer-color-orange-500 text-foreground/40">Orange Shimmer</span>

Orange Shimmer

shimmer-spread-{value}

Width of the shimmer highlight in pixels. Default: 120px.

<span class="shimmer shimmer-spread-200 text-foreground/40">Wide Shimmer</span>

Shimmer Effect (60px)Shimmer Effect (120px)Shimmer Effect (200px)

shimmer-angle-{value}

Angle of the shimmer sweep in degrees. Default: 15deg (resulting in a 105deg gradient). Higher values create a more diagonal sweep.

<span class="shimmer shimmer-angle-75 text-foreground/40">Diagonal Shimmer</span>

Shimmer Effect (0deg)Shimmer Effect (15deg)Shimmer Effect (75deg)

Animation Timing

Control how long the shimmer animation takes.

Total animation cycle

shimmer animation

(duration or speed)

repeat delay

(default: 1000ms)

Option A

shimmer-duration-{ms}

Fixed duration in milliseconds. Larger elements will appear to move faster since they cover more distance in the same time.

<span class="shimmer shimmer-duration-2000">...</span>

ShortMedium Length TextThis Is A Much Longer Text

Same duration, different perceived speeds

Option B

shimmer-speed-{px/s}

Speed in pixels per second. All elements sweep at the same visual speed regardless of width. Default: 200px/s.

<span class="shimmer shimmer-speed-200">...</span>

ShortMedium Length TextThis Is A Much Longer Text

Same speed, different durations

Width Required for shimmer-speed

CSS can't read text width, so you need to measure it with JavaScript and pass it in. Without it, defaults to 200px.

style={{ "--shimmer-track-width": width }}

shimmer-repeat-delay-{value}

Delay between animation cycles in milliseconds. Default: 1000ms. Use 0 for continuous shimmer without pause.

<span class="shimmer shimmer-repeat-delay-0">No Delay</span>

Shimmer Effect (0ms)Shimmer Effect (1000ms)Shimmer Effect (2000ms)

Background Shimmer

Add shimmer to skeleton components and non-text elements.

shimmer shimmer-bg

Background shimmer for skeleton loaders. Apply both shimmer and shimmer-bg classes.

<div class="shimmer shimmer-bg h-4 w-64 rounded bg-muted" />

Skeleton Card Example

Wrap skeleton elements in shimmer-container for automatic width detection. Use --shimmer-x and --shimmer-y to coordinate timing across the diagonal sweep.

<div class="shimmer-container flex gap-3">
  <div class="shimmer shimmer-bg [--shimmer-x:0] [--shimmer-y:0] size-12 rounded-full bg-muted" />
  <div class="flex-1 space-y-1">
    <div class="shimmer shimmer-bg [--shimmer-x:60] [--shimmer-y:0] h-4 w-1/4 rounded bg-muted" />
    <div class="shimmer shimmer-bg [--shimmer-x:60] [--shimmer-y:20] h-4 w-full rounded bg-muted" />
    <div class="shimmer shimmer-bg [--shimmer-x:60] [--shimmer-y:40] h-4 w-4/5 rounded bg-muted" />
  </div>
</div>

Uncoordinated

Synchronized with x/y coordinates

Color Customization

Override the shimmer highlight color with shimmer-color-{color}. Default: text color at 20% alpha.

<div class="shimmer shimmer-bg shimmer-color-blue-300/30 ..." />
<div class="shimmer shimmer-bg shimmer-color-amber-200/30 ..." />

With custom background color