🍱 Lunchbox Hands

CSS Skeleton Loader Generator

Shimmering skeleton loading placeholders in pure CSS

Generate CSS skeleton loading screens — text lines, avatars, cards, lists, and tables with a shimmer sweep or pulse. Tune colors and speed, copy the CSS and HTML. Everything runs in your browser.

Text Lines
Avatar + Lines
Card
List Rows
Table
Image Tile
Profile Header
s
px
#e2e8f0
#f8fafc
.lb-skel-text {
  display: grid;
  gap: 10px;
  width: 240px;
}
.lb-skel {
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: lb-skel-shimmer 1.5s linear infinite;
}
@keyframes lb-skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lb-skel {
    animation: none;
    transition: none;
  }
}

Get weekly dev tools and tips