Cubic Bezier Easing Calculator

It evaluates a CSS cubic-bezier(x1, y1, x2, y2) timing function. You enter the four control points and a time fraction t from 0 to 1, and it returns the eased output progress at that time, the peak overshoot, the maximum undershoot, and a table of progress values sampled across the whole animation. If you also enter a duration in milliseconds, each table row shows the elapsed time at that point.

A cubic-bezier curve is parametric, with fixed endpoints at (0, 0) and (1, 1) plus your two control points. The x axis is the animation time and the y axis is the progress. For a given time x, the calculator inverts the x component of the Bezier to find the curve parameter using Newton-Raphson with a bisection fallback, then reads the matching y value. This is the same approach browsers use to render CSS easing.

The CSS Easing specification requires the x coordinates of both control points to be in the range 0 to 1 so the time axis stays monotonic and the curve maps each instant to a single progress value. The y coordinates are unconstrained, which is why progress can dip below 0 or rise above 1. If you enter an x value outside 0 to 1, the calculator returns no result.

Overshoot is how far the progress rises above 1 before settling, and undershoot is how far it dips below 0 at the start. Back and anticipate easings, such as ease-out-back, use this on purpose to create a springy recoil. The calculator scans the full curve and reports the peak overshoot and maximum undershoot so you can see whether your control points push past the 0 to 1 band.

Yes. The presets map the standard keywords to their control points: ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), and ease-in-out is (0.42, 0, 0.58, 1). Linear corresponds to (0.333, 0.333, 0.667, 0.667), where progress equals time. Select a preset to load its points, then adjust them to fine-tune your own curve.

Copy the cubic-bezier(...) value shown in the result panel into your transition-timing-function or animation-timing-function property. For example, transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1). The timing table helps you confirm the motion feels right before you commit, since it shows exactly how much progress has happened at each fraction of the duration.