Cubic-Bezier Editor

Drag control points to craft a CSS easing curve. Free, runs entirely in your browser — no signup, and nothing you paste in is uploaded.

A CSS easing curve is a cubic Bézier with its endpoints nailed to (0,0) and (1,1); the four numbers you write are the two control points in between. The x axis is time and the y axis is progress, so the shape is a statement about how much of the animation has happened at each moment rather than about any path on screen.

Control points pull the curve without being on it, which is why dragging feels indirect at first. Pull the first point right and the animation loiters before starting; pull the second point left and it arrives early and coasts. y values outside 0 to 1 make the curve overshoot and come back, which is where bounce and anticipation come from.

The named keywords are just presets — `ease` is cubic-bezier(0.25, 0.1, 0.25, 1), and `linear` is the diagonal. Linear is worth avoiding for anything representing physical movement, because nothing in the physical world starts and stops at a constant rate.