Custom CSS Cubic-Bezier Curve Generator
Drag the two handles, type exact coordinates, or pick from a full easing library — then play it back next to a linear comparison so you can actually feel the difference, on movement, scale, rotation, or fade.
What the four cubic-bezier numbers mean
cubic-bezier(x1, y1, x2, y2) plots two control points against a time (x) and progress (y) axis. Y values above 1 or below 0 make the animation briefly overshoot or undershoot before settling — that's what produces a back-out anticipation effect. Type exact coordinates into the number fields for pixel-precise curves, or drag the handles freehand.
Using a custom transition easing tool
Paste the generated cubic-bezier() into any transition or animation-timing-function property, or switch the copy format to a plain JS array for animation libraries that take raw coordinates. Turn on "compare with linear" before hitting play to see exactly how much character your curve adds over no easing at all — try it against move, scale, rotate, and fade, since the same curve can feel different depending on what it's applied to.