Loading, pure CSS.
Zero-dependency shimmer for Tailwind CSS v4. Sine-eased gradients, OKLCH color mixing, text and skeletons, pure CSS.
> thinking
CSS only
No JavaScript runtime. Import the plugin and add a class.
Text and skeletons
The same utilities cover labels and loading placeholders.
Auto-sizing
Container queries derive speed and spread from width. No measuring.
Customizable
Speed, spread, angle, color, duration, and repeat delay.
Install
Add the plugin, then import it next to Tailwind.
Text
The highlight is invisible on solid black or white. Use a muted or semi-transparent color.
shimmer
Base utility. Needs a text color lighter or darker than the page so the sweep can show.
shimmer-invert
Fades the other way, so you can keep a stronger text color and still get a stark highlight.
Automatic color
The highlight mixes from the current text color.
shimmer-color-{color}
Override the automatic highlight with any Tailwind color.
shimmer-spread-{value}
Width of the highlight. Default is 120px.
shimmer-angle-{value}
Sweep angle in degrees. Default is 15deg. Higher values cut more diagonally.
Timing
A cycle is the sweep plus the pause. Duration is a fixed time. Speed is pixels per second.
shimmer-duration-{ms}
Fixed duration. Wider text covers more distance in the same time, so it looks faster.
shimmer-speed-{px/s}
Same visual speed on every width. Default is 200px/s. CSS cannot read text width, so pass --shimmer-track-width or it defaults to 200px.
shimmer-repeat-delay-{value}
Pause between cycles. Default is 1000ms. Use 0 for a continuous sweep.
Background
For skeletons, use shimmer and shimmer-bg together. Wrap a group in shimmer-container to share timing.
shimmer shimmer-bg
Background sweep for a single placeholder.
shimmer-container
Auto-sizing for a group. --shimmer-x and --shimmer-y line the sweep up across the diagonal.
uncoordinated
synchronized with x/y
shimmer-color-{color}
Override the highlight. Default is the text color at 20% alpha.