Tools · CSS · Cubic-bezier easing generator
Cubic-bezier easing generator
Drag a curve to build a cubic-bezier() easing value, watch it play with a live CSS transition, and copy the code.
Runs fully in your browser. Nothing is uploaded.
Your file is ready.
Try a different file, or try again.
How it works
Drag the curve, or type the four X/Y numbers directly.
Watch the live motion demo - it runs a real CSS transition with your curve.
Copy the generated cubic-bezier() value.
Frequently asked questions
CSS requires it - x is time, which can't run backward or past the end of the transition. y is the interpolated value, which can legitimately overshoot past 1 or dip below 0, which is exactly what gives a spring or "back" curve its feel.
No. The curve, the chart, and the motion demo are all generated and rendered entirely in your browser.
Yes. The same cubic-bezier() value works in both properties.
The real thing. The demo dot moves under a genuine CSS transition set to your exact cubic-bezier() value as its timing function, not a hand-written approximation of the math.
Comments