Cubic-Bezier Easing Generator

Set the four values of a CSS cubic-bezier() curve, pick a preset, and copy the timing function. The curve shows how far a value has moved at each point in time.

Presets

CSS timing function

Curve preview

Progress y at three points in time. A time of 0 is the start of the transition and 1 is the end.

How it works

A CSS easing is a curve from (0, 0) to (1, 1). The two middle points, (x1, y1) and (x2, y2), bend it. Horizontal axis: time, from the start of the transition (0) to the end (1). Vertical axis: progress, from the start value (0) to the end value (1).

x1 and x2 are the horizontal positions of the two control points. They must be between 0 and 1, because time cannot run backwards.

y1 and y2 are the vertical positions. They can be any number. Values below 0 or above 1 make the curve overshoot, which is useful for a bounce or a spring feel.

To find the progress at a given time, the page solves the curve for the point where its horizontal position equals that time, then reads the vertical position at that point. The result is checked to a very small tolerance.

Nothing you type is sent anywhere or stored. The calculation runs in your browser.