Base Animations

Blur

Animate blur effects on elements

Basic Usage

<div class="motion-blur-in-md">
  Blur in
</div>

Blur in

Available Values

These are the theme default values. You can customize the theme to add your own values to the motionBlur property or use arbitrary values.

Class	Value
motion-blur-in-0	0
motion-blur-in-none
motion-blur-in-sm	4px
motion-blur-in	8px
motion-blur-in-md	12px
motion-blur-in-lg	16px
motion-blur-in-xl	24px
motion-blur-in-2xl	40px
motion-blur-in-3xl	64px
motion-blur-in-[20px]	Arbitrary value

Loop Animations

<div class="motion-blur-loop-md">
  Looping blur
</div>

Pulsing blur

Exit Animations

<div class="motion-blur-out-md">
  Blur out
</div>

Blur out

Combining with Other Animations

<div class="motion-blur-in-md motion-opacity-in-0">
  Blur and fade in
</div>

Blur and fade in

Combining Blur with Modifiers

<div class="motion-blur-in-md motion-duration-[4s]">
  Blur with long duration
</div>

Blur in with long duration

Previous

Rotation

Next

Background Color

On this page

Basic Usage Available Values Loop Animations Exit Animations Combining with Other Animations Combining Blur with Modifiers

✨ Rombo for Chrome

Design animations visually in your browser.

Export directly to Rombo for Tailwind, CSS, or Framer Motion.