Effects Utilities
Transform, transition, filter, and shadow utilities for interactive and visual effects.
Shadows
Add depth with box shadow utilities from subtle to dramatic.
Box Shadows
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
Transforms
Scale
Scale elements up or down on hover.
Scale Transform
hover:scale-105
hover:scale-110
hover:scale-95
Rotate
Rotate Transform
rotate-0
rotate-45
rotate-90
-rotate-45
Translate
Translate Transform
hover:-translate-y-2
hover:translate-x-2
Transitions
Add smooth transitions to property changes.
Transition Utilities
Transition Duration
Duration Classes
duration-150 (fast)
duration-300 (normal)
duration-500 (slow)
Filters
Blur
Blur Filter
blur-none
blur-sm
blur
blur-lg
Brightness
Brightness Filter
brightness-50
brightness-75
brightness-100
brightness-125
Grayscale
Grayscale Filter
Opacity
Control element transparency with opacity utilities.
Opacity
opacity-0
opacity-25
opacity-50
opacity-75
opacity-100
Common Patterns
Interactive Card
Card with Hover Effects
Hover Me
This card lifts and gains shadow on hover.
Image Overlay
Hover Overlay Effect
Loading Spinner
Animated Spinner
Performance
Best Practices:- Use
transform and opacity for smooth 60fps animations - Apply
will-change sparingly for frequently animated properties - Avoid animating expensive properties like
width, height, or margin - Use
transition for simple hover effects - Reduce motion for users with
prefers-reduced-motion
