Cubic Bezier Easing Visualizer

cubic-bezier(x1, y1, x2, y2) defines a CSS easing curve from a fixed start anchor at (0, 0) to a fixed end anchor at (1, 1). The two pairs of numbers are the control points P1 (red) and P2 (blue). P1 shapes the curve as it leaves the start; P2 shapes how it approaches the end. Drag either handle in the editor to reshape the curve in real time.

Read the curve like a graph: the horizontal axis is the animation’s progress through time (0% to 100% of its duration), and the vertical axis is how far along the value has moved (0% to 100% of its change). A perfectly diagonal line is linear — equal progress per unit time. A curve that bows above the diagonal accelerates fast and decelerates at the end ( ease-out ); a curve that bows below accelerates slowly ( ease-in ).

Drag the y-coordinate of either handle above 1 (or below 0) to get an overshoot. The animated value will pass its destination, snap back, and settle. This is what motion libraries call a “back” or “spring” easing — try the Back out and Anticipate presets to see how the y can leave the unit square. The x-coordinate is always clamped to 0–1 because a cubic-bezier easing must be a function of time (one y per x).

Match the curve against your design system. The five CSS keyword presets (linear, ease, ease-in, ease-out, ease-in-out) are exact equivalents — selecting one loads the same numbers a browser would use internally. The Material and iOS presets reproduce the most common easing tokens from those design systems so you can drop them into a CSS-in-JS theme or animation library directly.