Cubic Bezier Easing
Shape CSS easing curves and race them against linear โ then copy.
About this tool
The curve maps time to progress; four sliders move the two control points; a ball races your easing against linear so you FEEL the difference; presets cover the standards plus overshoot and anticipation. Copy the cubic-bezier() when it feels right.
Easing as animation's accent
Nothing in nature moves linearly โ things accelerate and settle โ which is why linear animation reads as robotic and ease-out (fast start, gentle arrival) reads as natural for anything entering the screen. The grammar in practice: ease-out for arrivals, ease-in for departures, ease-in-out for movements within the page, and 200โ300ms for most UI (long enough to read, short enough not to wait for). The expressive territory lives out of bounds: Y values above 1 overshoot (bouncy, confident arrivals), below 0 anticipate (the cartoon wind-up) โ while X stays clamped to 0โ1 because time doesn't rewind. One curve per product, used consistently, reads as personality; gradients and shadows finish the look.
Frequently asked questions
What do the four cubic-bezier numbers mean?
Coordinates of two control points (x1,y1,x2,y2) bending the time-to-progress curve between (0,0) and (1,1). Steep sections are fast, flat sections slow โ the graph shows exactly where.
How do I make an animation bounce past its target?
Push a Y value above 1 โ the curve overshoots 100% progress then settles back. The 'overshoot' preset (0.34, 1.56, 0.64, 1) is a tasteful starting point.
Why can't X values go outside 0-1?
X is time, and the curve must be a function of it โ values outside 0-1 would mean progress at times that don't exist. Browsers reject them; the sliders enforce it.
What easing should UI elements use?
The working defaults: ease-out for things appearing, ease-in for things leaving, ease-in-out for moves, 200-300ms durations. Reserve overshoot for moments that deserve emphasis.