Cubic Bezier Curve Editor
Design a custom cubic-bezier easing curve for CSS animations, and copy the values.
Shaping how motion feels
The easing curve of an animation — how it accelerates and decelerates — is what makes motion feel natural or mechanical. CSS lets you define custom easing with a cubic-bezier curve, and this lets you shape that curve visually by dragging its control points, previewing the motion, and copying the values into your CSS.
Drag the curve, watch the preview, and copy the cubic-bezier values.
Why easing matters more than duration
People often tune animation duration and ignore easing, but easing is what 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 can add playfulness. Being able to see and shape the curve, rather than guessing at four numbers, is what lets you get motion that feels intentional rather than off.
Cubic Bezier Curve Editor FAQ
What does the easing curve control?
How an animation accelerates and decelerates over its duration, which is what makes motion feel natural or mechanical.
Why not just use the default easing?
Linear motion looks robotic because 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.