CSS

Tailwind animate-pulse: What It Does + Plain CSS Version

animate-pulse is a Tailwind CSS utility that gently fades an element in and out. It’s the standard way to build skeleton loaders, the grey placeholder shapes you see while content is loading.

Below is a demo, the exact CSS Tailwind generates, and a plain CSS version you can use without Tailwind.

Demo (plain CSS, no Tailwind):

<div class="skeleton-demo">
    <div class="skeleton-demo__avatar animate-pulse"></div>
    <div class="skeleton-demo__lines">
      <div class="skeleton-demo__line animate-pulse"></div>
      <div class="skeleton-demo__line skeleton-demo__line--short animate-pulse"></div>
    </div>
  </div>

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    50% {
      opacity: 0.5;
    }
  }

  .skeleton-demo {
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 360px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
  }

  .skeleton-demo__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #d1d5db;
  }

  .skeleton-demo__lines {
    flex: 1;
    display: grid;
    gap: 10px;
  }

  .skeleton-demo__line {
    height: 12px;
    border-radius: 6px;
    background: #d1d5db;
  }

  .skeleton-demo__line--short {
    width: 60%;
  }

The CSS behind animate-pulse

This is what Tailwind (v4) generates for the animate-pulse class. It fades opacity to 50% at the midpoint of each 2-second cycle and loops forever:

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    50% {
      opacity: 0.5;
    }
  }

Using it in Tailwind

Add animate-pulse to any element. Wrap it in motion-safe: so people who turned off animations in their OS settings don’t see it:

<div class="flex items-center gap-4 motion-safe:animate-pulse">
    <div class="size-12 rounded-full bg-gray-300"></div>
    <div class="flex-1 space-y-2">
      <div class="h-3 rounded bg-gray-300"></div>
      <div class="h-3 w-3/5 rounded bg-gray-300"></div>
    </div>
  </div>

Change the speed

In plain CSS, change the duration. In Tailwind v4, override the theme variable:

/* Plain CSS: slower pulse */
  .animate-pulse {
    animation-duration: 3s;
  }

  /* Tailwind v4: in your main CSS file */
  @theme {
    --animate-pulse: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

Need a bolder effect, like a pulsing button or a notification dot? See CSS pulse animation for scale and glow pulses.

Last updated

September 25, 2026

Views

201