CSS Skeleton Loader Generator

Create customizable skeleton loading placeholders with CSS for cards, text, images and UI components.

Skeleton Type

Lines4

Width320px

Height16px

Border Radius8px

Animation Speed1.5s

Base Color

Highlight Color

.skeleton {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-line {
  width: 100%;
  height: 16px;
  border-radius: 8px;
  background-image: linear-gradient(
    90deg,
    #b8b8b8 25%,
    #f3f4f6 50%,
    #b8b8b8 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
}

.skeleton-line:last-child {
  width: 65%;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

What is CSS Skeleton Loader Generator?

Create skeleton loading placeholders using CSS to represent content while a page or application is waiting for data.

How to use

Choose the skeleton element type.
Set its dimensions, colors and border radius.
Configure the loading animation.
Preview the skeleton and copy the generated CSS.

Features

CSS-only skeleton loaders
Custom dimensions
Custom colors
Border radius controls
Shimmer animation
Live preview

Common Use Cases

Content loading states
Card placeholders
Image placeholders
Dashboard interfaces
Web applications

Example

Input

Type: Text
Width: 240px
Height: 16px
Border radius: 4px
Animation: Shimmer

Output

.skeleton {
  width: 240px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #eeeeee 25%,
    #dddddd 50%,
    #eeeeee 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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