What the cubic-bezier generator does
Every CSS transition and animation follows a timing function — the curve that maps elapsed time to progress. The built-in keywords (ease, ease-in-out, linear) are fine, but the personality of an interface lives in custom curves: a snappy overshoot on a button, a heavy settle on a modal, a fast-out-slow-in on a drawer. This tool lets you drag the two control handles, preview the motion beside the standard keywords, and copy the cubic-bezier() value. Runs in your browser.
How cubic-bezier() works
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
Start point is fixed at (0, 0), end point at (1, 1).
(x1, y1) is the first control handle, (x2, y2) the second.
x = time (0 to 1), y = progress (0 to 1) — y may go below 0 or above 1 for overshoot.The curve's steepness at any point is the speed of the animation there. A curve that starts flat and steepens is an ease-in (slow start); one that starts steep and flattens is an ease-out (fast start, gentle stop). Handles pulled past the ends produce overshoot and bounce.
The standard keywords as curves
| Keyword | cubic-bezier() | Feel |
|---|---|---|
| linear | 0, 0, 1, 1 | Mechanical; good for progress bars and spinners |
| ease | 0.25, 0.1, 0.25, 1 | The default — slightly slow in, slower out |
| ease-in | 0.42, 0, 1, 1 | Slow start; for elements leaving the screen |
| ease-out | 0, 0, 0.58, 1 | Fast start, gentle stop; for elements entering |
| ease-in-out | 0.42, 0, 0.58, 1 | Symmetric; for elements moving within the screen |
Curves worth stealing
| Name | cubic-bezier() | Use |
|---|---|---|
| Material standard | 0.4, 0, 0.2, 1 | General UI motion — fast out, slow in |
| Material decelerate | 0, 0, 0.2, 1 | Entering elements |
| Material accelerate | 0.4, 0, 1, 1 | Exiting elements |
| iOS default | 0.25, 0.1, 0.25, 1 | Same as CSS ease |
| Snappy | 0.2, 0.8, 0.2, 1 | Buttons, toggles, quick feedback |
| Overshoot (back-out) | 0.34, 1.56, 0.64, 1 | Playful pop-in; y2 > 1 goes past the target and returns |
| Anticipate (back-in) | 0.36, 0, 0.66, −0.56 | Pulls back before moving; y2 < 0 |
| Expo-out | 0.16, 1, 0.3, 1 | Very fast start, long tail — feels premium |
Choosing a curve
- Entering: ease-out family. The element arrives quickly and settles, which reads as responsive.
- Exiting: ease-in family. It accelerates away; nobody watches it finish.
- Moving on screen: ease-in-out or a standard curve.
- Continuous or indeterminate (spinners, marquees): linear, or the loop will visibly pulse.
- Duration pairs with the curve. Sharp curves work at 150–250 ms; long expo tails need 400–600 ms to be seen. Motion over 500 ms in UI starts to feel slow unless it is large.
Beyond cubic-bezier
A single cubic curve cannot bounce more than once or model a true spring. For those, CSS offers linear() with a list of progress values (supported in all current browsers since 2023), which can approximate any curve including multi-bounce springs; and the Web Animations API or libraries such as Motion and GSAP provide real spring physics. Steps for frame-by-frame effects use steps(n). For most transitions, though, a well-chosen cubic-bezier is exactly enough.