Cubic-Bezier Easing Editor

When something animates — a menu sliding open, a card scaling up — it does not have to move at a constant speed. The easing curve describes how its progress is distributed across the duration. Read the graph like this: the horizontal axis is time, from the start (left) to the end (right) of the animation; the vertical axis is progress, from not-started (bottom) to finished (top). A straight diagonal line is linear — equal progress in equal time, which feels mechanical. Bend the line and the motion gets a rhythm: a curve that is shallow then steep means the element starts slowly and rushes to finish (ease-in), which is how almost all natural motion behaves.

The shape is controlled by two handles, the control points. The first pulls the start of the curve; the second pulls the end. Their four numbers are the cubic-bezier(x1, y1, x2, y2) value you copy into CSS. Drag them here and the preview elements re-animate instantly, so you can feel the curve rather than guess at the numbers.

The progress axis is not limited to the 0–1 box. If you drag a control point’s y value above 1, the animation sails past its target and eases back — the springy “back” or “bounce” effect that makes an interface feel alive and physical. Drag a y below 0 and the element first pulls back the wrong way before launching forward, like a character winding up before a jump — animators call this anticipation. The time axis, though, always stays inside 0–1: an animation cannot run backwards in time, so the editor keeps the x values clamped. These small overshoots, used sparingly, are the difference between motion that feels designed and motion that feels default.

This editor draws the easing curve as a live SVG you can drag, and previews it using the browser’s Web Animations API — so the motion you see is exactly what your CSS will produce. The five named keywords (linear, ease, ease-in, ease-out, ease-in-out) are included as presets, because each one is simply a fixed cubic-bezier curve; the value of a custom curve is everything in between and beyond them. Nothing is uploaded — it all runs on your device — and the output is a standard cubic-bezier() value that works in every modern browser’s transition-timing-function and animation-timing-function.