Cubic Bezier Generator & Easing Editor

This cubic bezier generator is a hands-on easing editor for CSS: drag the two control handles on the curve and the cubic-bezier(x1, y1, x2, y2) value updates live, together with a ready-to-paste transition-timing-function line. For precise work you can type exact coordinates into the number fields or nudge a focused handle with the arrow keys (0.01 per press, 0.05 with Shift).

The editor allows handle y-values from −0.7 to 1.7, so anticipation and overshoot ("back") easings fit on the canvas. The preview doesn't just replay a CSS transition — it solves the curve mathematically every frame (Newton–Raphson with a bisection fallback), driving a marker along the track, a dot riding the curve itself, and a live time → progress readout. A dashed linear ghost races alongside so you can see exactly how your easing differs from constant speed.

Beyond the five CSS keywords (linear, ease, ease-in, ease-out, ease-in-out), a built-in library holds 24 named easings — the Sine, Quad, Cubic, Quart, Quint, Expo, Circ and Back families with their standard easings.net coordinates. A reverse button mirrors any curve (turning an ease-in into its matching ease-out), the duration slider runs from 0.3s to 3s, and an optional scale + opacity demo shows the easing on a second kind of motion. Your last curve is saved on your device, and reduced-motion preferences are respected.