← labtool2026-09-06
Easing
A cubic-bezier editor. Shape the curve, watch the motion, copy the CSS. The motion tokens of this site came out of it.
Curve, drag the handles
Preview
The ball crosses on this curve, back and forth. Linear is the dashed diagonal; above it is fast early, below it is slow early.
CSS
transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
The y handles may leave the box; that is an overshoot, and it is how a spring-like settle is faked in plain CSS. The x handles may not, because time only moves forward.