CSS SKELETON LOADER GENERATOR

Example output (default settings)

<div aria-busy="true" aria-live="polite">
  <div class="skeleton skeleton-image"></div>
  <div class="skeleton skeleton-line"></div>
  <div class="skeleton skeleton-line short"></div>
</div>

.skeleton {
  background-color: #3a342d;
  border-radius: 6px;
  background-image: linear-gradient(90deg, #3a342d 25%, #5a5045 50%, #3a342d 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}

.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line.short { width: 60%; }
.skeleton-image { height: 160px; margin-bottom: 14px; }

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

How to build a CSS skeleton loader

1. 1

   Pick a layout: text lines, a card with an image, or a profile row.

2. 2

   Choose an animation (shimmer sweep, pulse, or static) and set the base and highlight colors.

3. 3

   Adjust the animation speed and corner radius while watching the live preview.

4. 4

   Copy the HTML and CSS and show the skeleton while your real content loads.

Questions

How does the shimmer animation work without JavaScript?

The element has a wide linear-gradient background (twice its width) with a lighter band in the middle. A keyframe animation moves background-position from one end to the other in a loop, so the light band appears to sweep across the placeholder. Only the background moves, so it stays cheap to render.

Should I use shimmer or pulse?

Both signal that content is loading. Shimmer draws more attention and suits large areas like cards and images; pulse is calmer and works well for small blocks or dense lists. Static is the safest choice if you want no motion at all.

Is the skeleton accessible to screen readers?

The generated HTML puts aria-busy and aria-live on the wrapper so assistive tech knows the region is loading. When your real content arrives, replace the skeleton and remove aria-busy. The CSS also turns the animation off for visitors who prefer reduced motion.

How do I make the skeleton match my real layout?

Give the skeleton blocks the same widths, heights, and spacing as the content they stand in for, so the page doesn't jump when data loads. Edit the .skeleton-line and .skeleton-image sizes in the copied CSS to fit.

Does this tool store or upload anything?

No. The preview and the CSS are generated locally in your browser, and your settings are not sent to a server.

Related tools

• CSS Spinner & Loader GeneratorBuild a loading spinner from 34 styles — rings, dots, bars, shapes, and skeleton/progress loaders — with size, speed, and color, and copy the CSS.
• CSS Starfield / Dots GeneratorScatter hundreds of points from a single box-shadow into a drifting, parallax starfield background and copy the CSS.
• Aurora Background GeneratorCreate a drifting northern-lights background from blurred, animated color blobs blended with mix-blend-mode.
• Animated Gradient Background GeneratorBuild a slow-moving, multi-color gradient background for hero sections and banners.
• CSS Animated Glowing Border GeneratorBuild a rotating conic-gradient border that chases around a card, with adjustable speed, thickness, and glow blur.
• Shimmer / Metallic Text GeneratorSweep a bright highlight band across text for a metallic or shimmer effect, built with an animated gradient.
• CSS Marquee GeneratorBuild a seamless, looping scrolling-text ticker in pure CSS with direction, speed, gap, pause-on-hover, and faded edges.
• Typewriter Effect GeneratorAnimate text typing itself out with a pure-CSS steps() animation and a blinking caret — no JavaScript needed.