Cubic Bezier Generator

Typing cubic-bezier(x1, y1, x2, y2) by hand and reloading the page to check the feel is a slow way to tune an animation. This generator closes that loop: drag either control-point handle on the curve, or type exact numbers into the x1/y1/x2/y2 fields, and the curve, the copyable CSS string and the live animation preview all update on every change — no build step, no reload.

The two axes work differently on purpose. x1 and x2 stay clamped between 0 and 1, because that is what the CSS specification actually requires of a cubic-bezier() timing function — a value outside that range is simply invalid. y1 and y2 have no such limit: drag a handle above the top of the box or below the bottom, and the curve overshoots past its start or its end, which is exactly how spring and bounce-style effects are built from a single easing curve.

Seeing a number is not the same as seeing the motion, so the preview runs two identical balls side by side on a loop: one moves using your custom curve, the other moves at a plain constant linear pace. Watching them race is the fastest way to tell whether an easing curve actually produces the feel you want, before it ever reaches a stylesheet. The preset pages — the real numbers behind CSS's own ease-in-out keyword, an honest overshoot approximation some call a bounce, and Google's published Material Design standard curve — are ready starting points you can drag from rather than blank control points.

Everything runs locally in your browser: no upload, no account, no server round-trip, and the generator keeps working offline once the page has loaded.