Cubic-Bezier Easing Editor
Edit a CSS cubic-bezier() easing curve — see the curve, a progress table per time step, overshoot, start and end velocity, keyword matches and the CSS.
The cubic-bezier() string and a transition declaration, the curve drawing with control handles, a live preview animation, a progress-at-time table and overshoot / velocity notes.
Example: cubic-bezier(0.25, 0.1, 0.25, 1) is the ease keyword: 41 % progress at a quarter of the time, 80 % at half, 96 % at three quarters; (0.34, 1.56, 0.64, 1) overshoots to 1.10 — a back-out bounce.
A curve
from four numbers.
What cubic-bezier() means, how progress is found for a time, and what overshoot and velocity are.
The curve
A CSS easing is a cubic Bézier from (0,0) to (1,1) with two control points (x1,y1) and (x2,y2); x is time and y is progress, and the spec requires x within 0–1 so time never runs backwards. The keywords are fixed curves: ease is (0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1), ease-in-out (0.42, 0, 0.58, 1) and linear (0, 0, 1, 1).
Progress at a time
The curve is parametric, so for a time t the page first finds the parameter s with x(s) = t — by Newton–Raphson with a bisection fallback, which is what browsers do — and then reads y(s). The table samples that at even steps; the chart draws the curve with its control handles; the live dot is the browser animating the same easing.
Overshoot and velocity
y is not limited to 0–1: a y above 1 makes progress pass the end value and come back (a bounce), which works for transforms and positions but is clamped for properties such as opacity. Start and end velocity are the slopes at the ends (dy/dx of the control handles); a handle at x = 0 with y ≠ 0 means an instant jump. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- CSS Easing Functions Level 1: cubic-bezier(x1, y1, x2, y2) with x in [0, 1], keywords ease, linear, ease-in, ease-out, ease-in-out; progress by solving x(s) = t (Newton–Raphson, bisection)
Last reviewed 21 September 2026. How results are checked: How we verify.