OneTaskBy Tim King · Updated
Shimmer Effect
Light Band Sweeping Across Grey Placeholder Cards for Loading States
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Shimmer Effect works
This shimmer effect generator makes the moving shine you see on loading placeholders: grey blocks with a lighter band sweeping across them while content arrives. Pick the colours, corners and speed, then copy the HTML and CSS.
A shimmer tells people that something is on its way, and placeholder shapes that match the real layout stop the page jumping when the content finally loads.
How the shimmer effect works
Each placeholder shape gets a three-stop linear-gradient that is twice as wide as the shape. A
keyframe animation slides its background-position from right to left on a loop, so the lighter
middle stop passes over every shape at the same pace.
Matching your layout
The example is an avatar and three lines, which suits comments, feeds and profile lists. Copy the
.shim-line and .shim-avatar rules to any block you like, such as an image box or a button, and
they all shimmer in step. The card carries aria-busy so assistive technology knows it is loading.
FAQ
What is the difference between a shimmer and a skeleton loader?
A skeleton loader is the grey placeholder layout itself. The shimmer is the animated light band that moves across it. Most modern skeleton screens use both together, which is what this generator produces.
How fast should a loading shimmer be?
Between one and two seconds per sweep feels calm. Faster sweeps look anxious and slower ones can make people think the page has frozen. The default of 1.4 seconds is a safe middle.
Does the shimmer stop for reduced motion?
Yes. A prefers-reduced-motion rule switches the animation off, leaving the still grey shapes in place, which still show that content is loading without any movement.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Skeleton Loader Generator
CSS skeleton screen placeholders with shimmer or pulse animation.
Loading Spinner
Design a CSS loading spinner and copy the code.
Loading Screen Generator
Full-page preloader overlay that fades out when the page loads.
Blur-Up Image Placeholder
Make a tiny base64 LQIP and the code to blur-up images as they load.
Progress Bar Generator
Generate a linear, striped, animated or circular CSS progress bar and copy the code.