Cubic-bezier generator (CSS easing)
Draw cubic-bezier animation curves by dragging the control points, compare them with ease, ease-in-out and other ready-made curves and copy the transition CSS.
How to useCubic-bezier curve editor
Available in: 
Cubic-bezier generator (CSS easing): what it is for
Drag the two control points on the graph or choose a ready-made curve, such as ease, spring and anticipation. Adjust the duration and compare your curve's animation with a linear one before copying the CSS for transition or animation.
How to use
- Choose a preset or drag the points.
- Set the duration and test the animation.
- Copy the CSS.
When to use it
- Creating more natural animations in interfaces.
- Fine-tuning menu and modal transitions.
- Studying easing functions.
Frequently asked questions
What is cubic-bezier?
It is the function that defines the acceleration of a CSS transition or animation. The four numbers are the x and y coordinates of two control points; x goes from 0 to 1 and y can go beyond those limits to create a spring effect.
Which curve should I use in interfaces?
For elements entering the screen, curves that slow down at the end, such as cubic-bezier(0.22, 1, 0.36, 1), feel more natural. For exits, prefer curves that speed up, such as ease-in.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.