CSS Skeleton Loader Generator

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

Shape

Base color

Shimmer highlight

Animation speed

1.5s

Border radius

6px

Preview

CSS

@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

<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 content that replaces skeletons, see CSS Card Generator.

Private & free — this tool runs entirely in your browser.