Cubic Bezier Easing Editor

Edits a CSS easing curve by dragging its two control points, with a live preview box that runs the animation at your chosen duration so you can judge the curve by how it moves rather than by how it looks. It ships the five CSS keywords with their real control points, the Material Design motion curves, and overshoot shapes like spring and anticipate, and it names whichever of those your curve is closest to. Alongside the cubic-bezier() value it can emit a linear() approximation, which is the modern way to hand a curve to something that only understands a list of points.

Pick a preset or paste a value you already have, then drag either handle on the curve. With a handle focused the arrow keys nudge it, and Shift with an arrow moves it faster, so the whole editor works from the keyboard. Set the duration to whatever your transition uses, press Replay to watch it again, then copy the cubic-bezier() value, the ready made transition declaration, or the linear() approximation.

The classic cubic-bezier editor is excellent and this one keeps what makes it good: draggable handles, a preview that actually moves, and a comparison against the curve you probably meant. It adds keyboard control of the handles, a linear() export, an honest note when the curve overshoots a property that cannot overshoot, and a shareable link that carries the exact curve. It runs entirely in the page, so your files and inputs never leave your device.

Why can the y values go past 1 but the x values cannot?

The x axis is time and the y axis is progress through the change. A control point with x outside 0 to 1 would ask the animation to sample outside its own duration, which is meaningless, so CSS rejects the whole declaration and the property falls back to ease. A y value outside that range just means the property passes its target and comes back, which is exactly how a spring or an anticipation curve is built.

When should I use linear() instead of cubic-bezier()?

A cubic bezier can only bend once in each direction, so it cannot describe a real bounce or a damped spring that crosses the target several times. linear() takes a list of points and therefore can. It is also useful for handing a curve to a runtime that has no bezier solver. The tradeoff is that linear() is an approximation with visible corners if you use too few points, and it needs Chrome 113, Safari 17.2, or Firefox 112 and later.

Which easing should I use for a UI transition?

For something entering the screen, an ease-out shape: fast at the start so it feels responsive, slow at the end so it lands softly. For something leaving, an ease-in shape, since nobody needs to watch it go. Symmetric ease-in-out reads as deliberate and suits longer moves between two on screen states. Keep durations short, roughly 150 to 300 milliseconds for small elements, and remember that a preview box tells you more than the shape of the curve does.