CSS Easing Function Picker

Pick a cubic-bezier curve for CSS animations and transitions. Drag the two control points to shape the curve, or load a Material/iOS preset. The animation preview shows how the curve feels in motion.

How to use the CSS Easing Function Picker

Drag the sliders or click a preset. The SVG shows the curve, the ball animates back and forth using the chosen easing. The output is a ready-to-paste cubic-bezier(...) value for any CSS transition or animation.