Cubic-Bezier Easing Generator

What is cubic-bezier easing?

A cubic Bézier curve is a smooth curve defined by four control points: P0 (start), P1 (first control), P2 (second control), and P3 (end). For CSS timing functions, P0 is always (0,0) and P3 is always (1,1), so you only specify P1 and P2 — giving you the cubic-bezier(x1, y1, x2, y2) notation.

The CSS transition-timing-function and animation-timing-function properties control the speed curve of an animation — how it accelerates and decelerates over time. The built-in keywords (ease, ease-in, ease-out, ease-in-out, linear) are all pre-defined cubic Bézier curves. Custom curves let you create exactly the feel you want: a fast initial burst with a gentle settle, a spring-like overshoot, or a dramatic slow start.

Great animations use easing to feel physical and natural. Objects in the real world do not move at constant speed — they accelerate and decelerate. ease-out (fast start, slow end) is best for things entering the screen. ease-in (slow start, fast end) is best for things leaving the screen. ease-in-out is best for elements that start and end at rest (e.g. accordions, tab panels).

Common mistakes

• Linear easing for UI — Linear easing feels mechanical and unnatural for most UI animations. Reserve it for loaders and spinners where consistent speed is expected.
• Y values outside 0–1 — Y control points can exceed 0–1 to create overshoot effects (bounce). X control points must remain in 0–1 or the curve is invalid.

You might also need