Cubic Bezier Easing Generator
Design a custom cubic-bezier easing curve for CSS animations and copy the values.
Shaping how motion feels
An animation's easing — how it accelerates and decelerates — is what makes motion feel natural or mechanical, and CSS lets you define custom easing with a cubic-bezier curve. This lets you shape that curve by dragging its control points, preview the motion, and copy the values into your CSS.
Drag the curve, watch the preview, and copy the values.
Why easing matters more than duration
People often tune animation duration and ignore easing, but easing carries the feel. The default linear motion looks robotic because nothing in the real world moves at a constant speed; a curve that starts slow, speeds up and eases out mimics physical motion and reads as polished. A curve that overshoots slightly adds a playful bounce. Being able to see and shape the curve, rather than guessing at four abstract numbers, is what lets you get motion that feels deliberate. Good easing is one of those details that is invisible when right and jarring when wrong.
Questions & answers
What does the easing curve control?
How an animation speeds up and slows down over its duration, which is what makes motion feel natural or mechanical.
Why not use the default easing?
Linear motion looks robotic, since nothing moves at constant speed. A shaped curve mimics real motion and feels far more polished.
Is anything uploaded?
No. It runs entirely in your browser.