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.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
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.
Guides
A closer look at specific problems this tool solves.
Why Easing Matters More Than Duration in UI Animation
Two transitions with the same duration can feel quick or sluggish depending only on their timing curve. What a cubic-bezier curve actually describes, and why the right one makes an interface feel responsive.
Read the guideHow to Create a Custom cubic-bezier() Easing Curve for CSS
Start from a preset, drag the two handles, compare the motion against linear and ease at the duration you will really use, and copy both the value and a ready transition line. The steps, with the limits the tool really has.
Read the guideAn Overshoot Menu Animation With ease-out-back, and Its Two Bugs
An ease-out-back curve makes a dropdown pop open and settle. It also makes the menu overshoot on the way closed, does nothing on opacity, and can poke out of a clipped container. The whole job, with the fixes.
Read the guide
Comments