Cubic Bezier Easing Generator
This cubic-bezier generator draws an easing curve and animates a preview using it, which is the only reliable way to judge one — the numbers in a cubic-bezier function tell you almost nothing about how the motion will feel. The two control points determine how an animation accelerates and decelerates. They can go above 1 or below 0, which produces overshoot and anticipation: the curve leaves the 0 to 1 range and comes back, giving motion that overshoots its target and settles, or pulls back slightly before moving. That is what makes an interface feel springy rather than mechanical.
How it works
Draws and edits a cubic Bézier easing curve. The two control points determine how an animation accelerates: drag them and the preview animates with the result, which is the only reliable way to judge an easing curve.
Control points can go above 1 or below 0, which produces overshoot and anticipation — the curve leaves the range and comes back, giving motion that feels springy rather than mechanical.
Everything runs in your browser — nothing you enter is sent to a server.
Reading the curve
The horizontal axis is time and the vertical axis is progress. A steep section means fast movement; a flat section means the animation is barely moving. The curve always starts at the bottom left and ends at the top right — only the path between them changes.
The named easings, as curves
| Name | cubic-bezier | Feels like |
|---|---|---|
| linear | 0, 0, 1, 1 | Mechanical, constant speed |
| ease | 0.25, 0.1, 0.25, 1 | The default — gentle both ends |
| ease-in | 0.42, 0, 1, 1 | Starts slow, accelerates away |
| ease-out | 0, 0, 0.58, 1 | Arrives fast, settles gently |
| ease-in-out | 0.42, 0, 0.58, 1 | Slow at both ends |
Which to use where
- Entering the screen — ease-out. It arrives quickly and settles, which reads as responsive.
- Leaving the screen — ease-in. It accelerates away, so the user is not waiting on it.
- Moving between positions — ease-in-out. Both ends are anchored, so both should ease.
- A continuous spinner — linear. Constant speed is correct when there is no start or end.
Overshoot
A second control point above 1 makes the animation pass its target and come back — the settle you see in physical objects with momentum. Used sparingly on things appearing, it makes an interface feel alive. Used everywhere, it becomes exhausting.
Frequently asked questions
What do the control points do?
They shape the curve between the fixed start and end points. The curve maps elapsed time to progress, so its steepness at any moment is the speed of the animation at that moment.
What do values above 1 or below 0 mean?
The animation goes past its target and comes back (overshoot), or moves backwards slightly before starting (anticipation). Both make motion feel physical rather than mechanical.
Which easing should I use?
ease-out for things entering the screen — fast then settling. ease-in for things leaving. ease-in-out for movement between two on-screen positions. Linear looks mechanical for almost everything except a continuous spinner.
Why does linear feel wrong?
Because nothing in the physical world starts and stops instantly. Constant speed reads as robotic, which is why it is the wrong default for interface motion.
Can I use this for keyframe animations?
Yes. The same function works for animation-timing-function, and it can be set per keyframe for finer control.
Is anything uploaded?
No. Everything runs in your browser.
Related tools
CSS Button Generator
This button generator builds a complete style including hover and active states.
CSS Gradient Generator
This gradient generator builds linear, radial and conic gradients with a live preview.
CSS Box Shadow Generator
This box shadow generator stacks multiple layers with a live preview.