Easing
Drag a cubic-bézier curve, watch something move to it, and copy the CSS.
Runs in your browser — nothing you type here is sent anywhere.
curve
Drag either handle, or focus one and nudge with the arrow keys.
out back
timing function
control points
duration
800 ms
paste a value
at t 0.250.816
at t 0.501.087
at t 0.751.060
overshoot+9.8% at t 0.57
undershootnone
preview800ms loop
out back
linear
scale
rotate
fade
css
transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
linear() is the same shape as evenly spaced stops — what you reach for when the target will not take a bezier.
presets
Easing is judged by eye, not by numbers. Four control-point values tell you nothing about whether the motion feels right, so the only real test is watching a thing move and adjusting until it stops looking wrong.
Drag the handles and a preview animates continuously against the curve you are editing. Common presets are there as starting points, and the output is the `cubic-bezier()` you paste into CSS.
What people open it for
- Tuning a transition until the motion feels right
- Building an ease-out with more character than the default
- Comparing your curve against the standard presets
In the terminal
tools easing
Every utility is also a command in the desktop's shell.