Color Transitions and Reduced Motion in Tailwind CSS

Why Reduced Motion Matters for Color

Color transitions and animated gradients can trigger discomfort for users with vestibular disorders. Tailwind's motion-reduce variant lets you disable or simplify animations while keeping instant color changes.

Using motion-reduce for Color Transitions

<!-- Button with respectful color transition -->
<button class="bg-blue-600 hover:bg-blue-700 transition-colors duration-200 motion-reduce:transition-none text-white px-4 py-2 rounded-lg">
  Respectful Button
</button>

<!-- Animated gradient that stops for reduced motion -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500 bg-[length:200%_auto] animate-[gradient_3s_ease_infinite] motion-reduce:animate-none">
  Gradient banner
</div>

What to Keep vs Remove

• Keep: Instant color changes on hover and focus (no transition needed)
• Remove: Animated gradient shifts and color cycling
• Reduce: Shorten transition durations from 300ms to 0ms or use instant swap
• Keep: Loading spinners (use a simpler non-rotating indicator instead)
• Keep: Color-based state changes; just remove the animation between states

Global Reduced Motion Setup

/* Respect system preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Or per-element with Tailwind */
<div class="motion-reduce:transition-none motion-reduce:animate-none">
  Animations disabled for sensitive users
</div>