Design CSS easing curves with a visual cubic-bezier editor, compare the motion with linear timing and copy the transition code. Free online tool.
About this tool
Design a transition easing curve and compare it with linear motion.
How to use CSS Cubic Bezier Generator
- Choose a preset or adjust X1, Y1, X2 and Y2 using controls or graph handles.
- Set Duration and click Play animation to compare motion.
- Copy the cubic-bezier value into your transition or animation timing rule.
Worked example
Compare ease-in and ease-out at the same duration to choose how a panel should settle into place.
Does the curve define animation distance?
No. It controls timing progress. Your animation properties define the distance or other visual change.
Can a curve overshoot?
Some control values produce overshooting motion. Test the full transition and consider reduced-motion preferences.
Explore CSS Tools · More practical guides