CSS Cubic Bezier Generator

cubic-bezier() is a timing function that controls how an animation speeds up and slows down over its duration. It is defined by two control points, written cubic-bezier(x1, y1, x2, y2), that bend a curve mapping elapsed time (x) to animation progress (y). The CSS keywords ease, ease-in, ease-out and ease-in-out are all just named cubic-bezier curves.

They are the X and Y coordinates of two control points: (x1, y1) and (x2, y2). The curve always runs from (0, 0) to (1, 1). The X values must stay between 0 and 1, but the Y values can go below 0 or above 1 to create overshoot or anticipation effects.

Paste it into transition-timing-function or animation-timing-function, for example transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). You can also use it as the third part of the transition shorthand.

Yes. Y values outside 0 to 1 make the animation overshoot past its end value or pull back before starting, which is how bouncy or elastic easings are made. Only the X values are clamped to 0 to 1, because time cannot run backwards.

Yes. The cubic-bezier() timing function is supported in every current major browser, including Chrome, Firefox, Safari and Edge, with no vendor prefix needed.

No. The curve, preview and CSS string are all computed in your browser as you drag, so nothing about your easing leaves your device.