Cubic Bezier Generator
Drag the handles to shape a CSS easing curve, watch the motion preview, and copy the
cubic-bezier() value. Everything runs in your browser.
cubic-bezier(.25, .1, .25, 1)
How to use the cubic-bezier generator
- Drag the two dots to bend the curve — horizontal is time, vertical is progress.
- Watch the preview run your easing next to a linear one, and try the presets.
- Copy the value and drop it into your CSS, e.g.
transition: transform .4s cubic-bezier(.25,.1,.25,1);
Pull a handle above 1 or below 0 to get overshoot and anticipation — the springy, bouncy feel used in polished UI motion.
More PAYATE tools
Frequently asked questions
What is a cubic-bezier easing curve?
It is a way to describe how an animation speeds up and slows down over time. CSS uses cubic-bezier(x1, y1, x2, y2) as the transition-timing-function or animation-timing-function; the four numbers position two control handles that bend the curve.
How do I use the handles?
Drag the two dots on the curve. The horizontal position is time and the vertical is progress. Steeper sections mean faster motion; flatter sections mean slower. The preview and the cubic-bezier() value update as you drag.
What do the four numbers mean?
They are the X and Y of the first and second control points: x1, y1, x2, y2. X values stay between 0 and 1 (time), while Y values can go below 0 or above 1 to create anticipation or overshoot (a bounce-like effect).
How do I use it in my CSS?
Copy the value and set it as your timing function, for example transition: all .4s cubic-bezier(.25,.1,.25,1); or on an animation.
Is anything sent to a server?
No. The editor runs entirely in your browser; nothing is uploaded or stored.
Is it free?
Completely free, no sign-up.