Home / Design / Cubic Bezier Generator
Cubic Bezier Generator
Drag the handles to design a CSS easing curve, watch it animate and copy the cubic-bezier().
Reading the curve: the horizontal axis is time and the vertical axis is progress. A steep start means a fast start; handles pulled above the top or below the bottom create overshoot and anticipation (“back” effects). Most UI motion feels best with an ease-out curve — quick to respond, gentle to settle — at 150–300 ms.
About the Cubic Bezier Generator
The Cubic Bezier Generator lets you drag two handles to design a CSS timing function, then compare it with ease and linear in a live animation. Start from presets, set the preview duration and copy the cubic-bezier() value to make transitions and animations feel smooth and natural.
How to use the Cubic Bezier Generator
- Drag the two handles on the curve, or start from a preset.
- Play the comparison to see your easing against ease and linear.
- Adjust the preview duration.
- Copy the cubic-bezier() CSS.
Frequently asked questions
What is cubic-bezier in CSS?
cubic-bezier(x1, y1, x2, y2) defines an easing curve that controls how an animation speeds up and slows down over time.
What does ease-in-out mean?
The animation starts slowly, speeds up in the middle and slows down at the end. Its curve is cubic-bezier(0.42, 0, 0.58, 1).
Can a cubic-bezier overshoot?
Yes. Y values above 1 or below 0 make the animation overshoot and bounce back, which gives a playful effect.