CSS's cubic-bezier(x1, y1, x2, y2) timing function defines an easing curve using two control points. x1 and x2 represent time and are clamped to [0, 1] by the CSS spec; y1 and y2 represent progress and can go outside that range for an overshoot effect.
Adjust the four values (or pick a preset) to see the curve and a live animated preview, then copy the generated cubic-bezier(...) value into your transition or animation CSS.
Why are x1 and x2 limited to 0-1, but not y1 and y2?
The CSS specification requires the x values (representing time) to stay within the 0-1 range, but allows y values (representing progress) outside it, which produces an overshoot or bounce effect.
What do the presets correspond to?
The preset buttons match the CSS keyword timing functions (ease, ease-in, ease-out, ease-in-out) and linear's own curve, so you can start from a familiar baseline and adjust from there.
Where can I use the generated value?
Anywhere CSS accepts a timing function — most commonly transition-timing-function or animation-timing-function.