Easing function previewer
Select easing functions, press play, and watch boxes animate across a track at the same duration. Compare translate, opacity, and scale previews.
Playback
Built-in
Presets
Custom cubic-bezier
Animation track
Curves
CSS also supports linear() for multi-stop linear easing (not plotted here). Use it when you need several constant-speed segments in one timing function.
About this tool
Easing controls how fast a transition or animation accelerates and decelerates. Comparing curves side by side helps you pick the right feel — snappy UI feedback, smooth page motion, or a playful overshoot.
Everything runs in your browser. Selected easings and custom bezier values are saved in the URL.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →