Cubic Bezier Generator

Default CSS easing tends to feel generic, and dialing in the four numbers of a cubic-bezier by hand is pure guesswork: tweak a decimal, reload, still not right. Here you drag the two control points directly on the graph, hit Play to watch a ball travel across at whatever duration you set, and copy the value already formatted for transition-timing-function and animation-timing-function.

On the graph, X is time and Y is animation progress. The generator enforces one rule for you: X1 and X2 stay clamped between 0 and 1, because outside that range the curve stops being a valid function of time and the browser throws the whole value away. Y1 and Y2, on the other hand, may go past those limits on purpose: that is how overshoot works, the effect of shooting past the target and settling back. The back preset uses cubic-bezier(0.68, -0.55, 0.27, 1.55) for exactly that reason.

Start from a preset and nudge gently: a 0.05 change is already noticeable. Test with your project's real duration, since a curve that feels great at 1500 ms can feel abrupt at 300 ms; the duration field accepts 200 to 5000 ms. Also keep in mind that overshoot only shows on properties that can exceed their final value, like transform: opacity gets clamped between 0 and 1. Everything runs in your browser; nothing is sent to a server.