CSS Skeleton Loader Generator

Home/Tools/Skeleton Loader Generator

Create skeleton loading placeholders for better UX.

No sign-up neededRuns in your browserProduction-ready CSS

Skeleton Type

Appearance

1.5s
8px

Preview

Generated CSS
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Usage */
.skeleton-text {
  height: 16px;
  width: 100%;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-image {
  width: 100%;
  height: 150px;
}