FREE CSS EASING CALCULATOR
See where your easing curve takes you.
Enter a cubic-bezier() curve and a time percentage. Read the corresponding output progress, inspect the curve and copy its CSS.
All calculation stays in this browser. No account, upload or moving preview.
CURRENT CURVE RESULT
Output progress
Progress number: . Rounded to 6 decimal places.
Current CSS declaration
Numerical method and precision
Parameter midpoint, rounded to 12 decimals: . The parameter is an internal curve coordinate; it is usually different from time progress. Text and CSV retain the rational midpoint, its evaluated output and a conservative output error bound. Display decimals use rounding half away from zero.
The same curve across the time interval
Sampled every 10% of time. Output is rounded to 6 decimals and can extend beyond 0–100%.
| Time progress | Output progress |
|---|
Time and output do not have to match
With ease, 50% of the time interval corresponds to about 80.240339% output progress. With ease-in, the same time corresponds to about 31.535681%. These are points on two different timing curves.
A cubic Bézier curve has its own parameter. To find the result, Bezierframe first solves the curve’s x coordinate for your time input, then evaluates its y coordinate. Substituting time directly for that parameter would usually give the wrong answer.