Cubic-Bezier Easing Editor

What is a cubic Bézier curve?

A cubic Bézier curve is defined by four points: P0, P1, P2, and P3. P0 (0, 0) is the start and P3 (1, 1) is the end - representing the beginning and end of the animation. P1 and P2 are control points that pull the curve toward them without the curve actually passing through them. Moving the control points changes the shape of the timing curve and therefore the feel of the animation.

CSS cubic-bezier() format

CSS exposes the two inner control points directly:

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Where (x1, y1) is P1 and (x2, y2) is P2. x values must be between 0 and 1; y values can be outside [0, 1] to create bounce or overshoot effects.

Named timing function presets

When to use custom easing

• Spring / bounce: set the y values of one or both control points outside [0, 1] to create overshoot or undershoot effects that mimic physical spring behavior.
• Anticipation: start slightly backward before moving forward (P1.y slightly negative) for a cartoon-style anticipation ease-in.
• Snappy UI feedback: a fast ease-out (quick deceleration) gives buttons and panels a crisp, responsive feel without abruptly stopping.

Spring animations

Cubic Bézier curves cannot perfectly replicate spring physics, which involve damped harmonic motion. For more natural spring animations, consider:

• CSS linear() function: A new easing function (CSS Easing Level 2) that accepts multiple interpolation points. Safari 17+, Chrome 113+, Firefox 112+.
• JavaScript spring physics: Libraries like Framer Motion, React Spring, or Popmotion implement true spring simulations with mass, stiffness, and damping parameters.
• Web Animations API: Use element.animate() with custom easing arrays for more complex curves.

Named easing conventions