CSS Skeleton Loader Generator

Generate shimmer skeleton loading animations — shapes, colors, speed, and radius.

Active Shape: CardBase Color: #e2e8f0Shimmer Color: #f8fafcSpeed: 1.5sBorder Radius: 6px

Color & Style Presets

Shape

Base Color

Shimmer Highlight

Animation speed: 1.5s

Border radius: 6px

Preview

CSS Stylesheet

@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f8fafc 50%,
    #e2e8f0 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-sm  { height: 12px; }
.skeleton-md  { height: 16px; }
.skeleton-lg  { height: 20px; }
.skeleton-xl  { height: 140px; }

HTML Markup

<div style="width:280px;padding:16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff">
  <div class="skeleton skeleton-xl" style="width:100%;margin-bottom:12px;border-radius:6px"></div>
  <div class="skeleton skeleton-lg" style="width:70%;margin-bottom:8px"></div>
  <div class="skeleton skeleton-md" style="width:90%;margin-bottom:8px"></div>
  <div class="skeleton skeleton-md" style="width:60%"></div>
</div>

How CSS skeleton loading animations work

Skeleton loaders use a CSS gradient animated across the element via background-position. The shimmer effect is created by a linear-gradient with your base color on the edges and a lighter highlight in the center, sweeping left-to-right using a @keyframes animation. This requires no JavaScript and renders instantly — ideal for perceived performance improvements while your real content loads.

For other loading indicators, try the CSS Animation Generator. To style the components that replace skeletons, see CSS Button Generator.

Built and maintained by Meet Shah · Last updated 30 July 2026

What this tool is used for

Producing a placeholder that matches the shape of the content that will replace it.
Generating the shimmer keyframes without hand-writing a gradient animation.
Tuning animation speed to something that reads as loading rather than as decoration.
Building placeholders for a list where each row should look consistent.
Comparing a shimmer against a simple pulse for a given design.

Frequently Asked Questions

Why use a skeleton instead of a spinner?: Because it shows where content will appear, so the layout does not jump when it arrives and the wait feels shorter. A spinner communicates only that something is happening — a skeleton communicates what is coming.
How is the shimmer built?: A wide linear gradient as the background, animated by moving `background-position` across the element. Animating position rather than a transform keeps the shimmer aligned to the shape, and using a gradient means no image is required.
Does it need reduced-motion handling?: Yes. A continuous shimmer is exactly the kind of repetitive motion `prefers-reduced-motion` exists for — the accommodation is a static placeholder block, which still communicates the layout without the animation.
How is it announced to a screen reader?: It should not be, as content. Mark the region `aria-busy="true"` and hide the skeleton itself with `aria-hidden`, so the user hears a loading state rather than a series of meaningless empty elements.
When is a skeleton the wrong choice?: When the layout is unknown, when the wait is under a few hundred milliseconds — where it flashes and adds noise — or when the result may be empty. A skeleton that resolves into nothing is a worse experience than a brief spinner.

Common errors and gotchas

Making the placeholder a different size from the real content, so the layout jumps when data arrives.
Animating a property that forces layout rather than compositing, which costs far more than it needs to.
Ignoring reduced-motion preferences, so an accessibility setting is overridden by a loading state.
Leaving the skeleton visible on error, which reads as a hang rather than a failure.
Using very low contrast, which makes the placeholder invisible on some displays.