What the four cubic-bezier numbers mean
An easing curve is a graph with elapsed time across and progress up. The four numbers in cubic-bezier are the coordinates of two control points, while the start point (0,0) and the end point (1,1) are fixed. Enter the four values and this tool draws the curve and tabulates progress at 25%, 50% and 75% of the time.
x stays in 0 to 1, y does not
An x outside 0 to 1 makes CSS treat the declaration as invalid and drop it, so those values are blocked at the input. y has no limit, so values above 1 or below 0 are allowed and produce motion that overshoots the target and returns. The function definition follows the W3C CSS Easing Functions specification (as of October 2026).
What it does not do
It does not recommend a curve. If the values match a keyword such as ease to 3 decimals it only reports that name. Playback settings such as duration and iteration belong to the transition and keyframes tools, while this page writes the timing-function declaration alone. The steps() function is out of scope.
Frequently Asked Questions
Because the horizontal axis is time, which cannot run backwards. An x outside 0 to 1 makes CSS drop the declaration. The vertical axis, y, has no limit.
Progress passes the target and comes back, which is how a bouncy feel is made. The size of that overshoot appears in the progress range in the results.
ease is 0.25, 0.1, 0.25, 1. When your values match a keyword to 3 decimals, the results name that keyword.