Filters, Transitions, and Transforms

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

These families animate and post-process the box: filter- reprocesses pixels, transition- / animate-* move properties over time, and transform utilities scale, rotate, translate, and skew — now in 3D as well. See Filter, Transition Property, and Scale.

Filters

<img class="blur-sm brightness-110 contrast-125 saturate-150" />
<img class="grayscale hover:grayscale-0 transition" />
<img class="invert sepia hue-rotate-60 drop-shadow-lg" />

<!-- backdrop-* filters process whatever is BEHIND the element -->
<div class="bg-white/30 backdrop-blur-md backdrop-saturate-150">frosted panel</div>

In v4 blur renamed down a step: the old blur-sm is now blur-xs, the old blur is blur-sm (same for backdrop-blur and drop-shadow). See Backdrop Filter.

Transitions

<!-- what to transition -->
<button class="bg-sky-600 transition-colors hover:bg-sky-700">colours only</button>
<div class="transition hover:scale-105">the common set (colour, opacity, transform, filter, &#8230;)</div>
<div class="transition-all">everything</div>

<!-- timing -->
<div class="transition duration-300 ease-in-out delay-100 hover:opacity-50"></div>
<div class="transition ease-[cubic-bezier(0.34,1.56,0.64,1)]">custom curve</div>

<!-- discrete properties + @starting-style, for enter/exit without JS -->
<div popover class="opacity-0 transition-discrete transition
                    starting:open:opacity-0 open:opacity-100"></div>

Note that in v4 the transition set also includes outline-color, so a focus outline colour will animate unless you set it unconditionally. See Transition Duration and Transition Behavior.

Animation

<svg class="animate-spin">&#8230;</svg>
<span class="animate-ping"></span>
<div class="animate-pulse">skeleton</div>
<div class="animate-bounce">&#8595;</div>
<div class="motion-reduce:animate-none">respects the user preference</div>

Define a custom animation by adding an --animate-* theme variable and its @keyframes inside @theme:

@import "tailwindcss";

@theme {
  --animate-fade-in-scale: fade-in-scale 0.3s ease-out both;

  @keyframes fade-in-scale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }
}
<div class="animate-fade-in-scale">appears</div>

See Animation.

Transforms

<!-- 2D -->
<div class="scale-105 hover:scale-110">grow on hover</div>
<div class="rotate-3 -rotate-6">tilt</div>
<div class="translate-x-4 translate-y-2">nudge</div>
<div class="skew-x-6"></div>
<div class="origin-top-left scale-90">transform-origin</div>
<div class="transform-gpu">force GPU compositing</div>

<!-- 3D (new in v4): needs perspective on an ancestor and transform-3d on the moving element -->
<div class="perspective-[800px]">
  <div class="transform-3d rotate-x-30 rotate-y-45 backface-hidden">card face</div>
</div>

<!-- reset an individual transform, not the whole thing -->
<div class="scale-150 hover:scale-none"></div>

See Rotate, Translate, and Perspective.

Related pages