Generator Tools

CSS Skeleton Loader Generator

Generate skeleton screen HTML and CSS with shimmer or pulse animation. Live preview, seven presets, copy-ready code that runs in any browser.

Skeleton preset

Settings

Animation

Animation duration1.6s

Corner radius6 px

Base color

Shimmer highlight color

CSS class name

Live preview

The preview uses the same CSS the copy buttons return. Skeleton shapes respect prefers-reduced-motion automatically.

Output

<style>
.skeleton *,
.skeleton::before,
.skeleton::after {
  box-sizing: border-box;
}

.skeleton .skeleton-shape {
  position: relative;
  overflow: hidden;
  background-color: #1f2937;
  border-radius: 6px;
}

.skeleton .skeleton-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    #374151 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

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

.skeleton {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 32rem;
  padding: 16px;
}
.skeleton .skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.skeleton .skeleton-body {
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.skeleton .skeleton-title { height: 16px; width: 60%; }
.skeleton .skeleton-line { height: 12px; }
.skeleton .skeleton-line:nth-of-type(1) { width: 100%; }
.skeleton .skeleton-line:nth-of-type(2) { width: 80%; }
</style>

<div class="skeleton" role="status" aria-live="polite" aria-label="Loading">
  <div class="skeleton-avatar skeleton-shape"></div>
  <div class="skeleton-body">
    <div class="skeleton-title skeleton-shape"></div>
    <div class="skeleton-line skeleton-shape"></div>
    <div class="skeleton-line skeleton-shape"></div>
  </div>
  <span class="skeleton-sr-only" style="position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden">Loading</span>
</div>

Tips

Match the skeleton shapes to the real content shape. A card skeleton should occupy the same space as the card it stands in for, so the layout does not jump when the real data arrives.
Shimmer animations between 1200 ms and 2000 ms read as a calm loading rhythm. Faster than 800 ms can feel frantic on the eye.
Light palettes use a base near gray-200 (#e5e7eb) with a highlight near gray-100 (#f3f4f6). Dark palettes use a base near gray-800 with a slightly lighter highlight.
For accessibility, keep role="status" and an aria-label on the wrapper so screen readers announce that a load is in progress, and the prefers-reduced-motion rule shipped with this code disables motion automatically.

How to use

Pick a preset that matches the shape of the content you are loading: line, paragraph, avatar card, list with thumbnails, profile, article, or table.
Pick an animation mode: shimmer for a horizontally sliding highlight, pulse for a uniform opacity fade, or no animation if you want a static placeholder.
Adjust the base color and (for shimmer) the highlight color. Use the Light palette button for typical light-mode placeholders or the Dark palette button for dark-mode placeholders.
Set the animation duration and corner radius, and optionally change the CSS class name so it matches your design system.
Switch the preview background between dark, light, or checker to see how the skeleton reads on your real page background.
Open the Output panel, pick CSS, HTML, or HTML + CSS, and click Copy. Paste into your project. The CSS includes a prefers-reduced-motion rule so it ships accessible by default.

About this tool

CSS Skeleton Loader Generator builds the HTML markup and pure-CSS rules for a skeleton loading screen and shows a live preview that uses the exact CSS the copy button hands back. Skeleton loaders are the gray rectangles, circles, and line-shaped placeholders that appear while a page or panel is waiting on data, and they feel faster to users than a centered spinner because the layout of the eventual content is already on screen. Seven presets cover the most common shapes you see in real interfaces: a single line, a three-line paragraph, an avatar card, a four-row list with thumbnails, a centered profile, a hero-and-text article card, and a header-plus-six-rows table. Pick the preset that matches your real content, adjust the base color and shimmer highlight color (a one-click button swaps between the typical light-mode gray-200 and dark-mode gray-800 palettes), set the animation duration between 400 ms and 4 seconds, pick a corner radius, and switch between a horizontally sliding shimmer gradient, a uniform opacity pulse, or no animation at all. The CSS uses only well-supported properties (transform, opacity, background, border-radius, aspect-ratio, and grid) and a single set of keyframes, so the rules paste cleanly into any framework: plain HTML, React, Vue, Svelte, Tailwind layers, CSS modules, or any CSS-in-JS library. A prefers-reduced-motion media query is included automatically so users who request reduced motion never see the shimmer animation. The wrapper carries role="status" and aria-label="Loading" so screen readers announce the loading state, and a visually hidden "Loading" string is included as a fallback. Useful for showing a loading state for product cards, comment threads, list views, dashboard tables, settings pages, profile headers, blog post previews, and any panel that takes more than a few hundred milliseconds to populate. Everything runs in your browser, so the colors, class names, and any palette tweaks never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Skeleton Loader Generator

How to use

About this tool

You may also like

CSS Loading Spinner Generator

CSS Animation Generator

CSS Glassmorphism Generator

CSS Button Generator

Placeholder Image Generator

CSS Gradient Generator