Cubic-Bezier Easing Editor

How to use this tool

1. Choose a CSS or design-system preset, drag the handles, or type exact control-point coordinates.
2. Paste an existing cubic-bezier() value and adjust the live preview duration if needed.
3. Copy the cubic-bezier() value.

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 anticipation or overshoot. You can drag either handle, edit the four coordinate fields directly, or paste an existing cubic-bezier() value. The x fields stay within the CSS range, while y values remain free to go below 0 or above 1.

Named timing function presets

When to use custom easing

• Spring-like overshoot: set the y values of one or both control points outside [0, 1]. This can suggest a springy finish, but one cubic Bézier curve cannot create repeated bounces or reproduce damped spring physics.
• 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 and their limits

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

The presets above include each convention in this table, so you can load the documented values into the graph and preview them directly. Changing the duration replays the bar; with reduced motion enabled, the preview shows its finished position without animating.