X values control when the curve moves through time and must stay between 0 and 1.
Local CSS easing generator
Build a CSS easing curve with live preview
Tune four cubic-bezier control values, watch the motion change in real time, and copy a ready-to-paste CSS timing function.
* Everything runs in your browser. No curve data is uploaded.
CSS ready
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);QUICK GUIDE
Small changes shape the motion
Y values control speed and can overshoot below 0 or above 1 for a springy feel.
Use the copy button to take the exact timing function into a transition or animation.
The preview uses the browser's own CSS animation engine, so it matches your pasted value.
FAQ
CSS easing questions
What does cubic-bezier mean?
It describes a curve between the start and end of an animation. Two control points shape its speed over time.
Why are x values limited?
CSS requires the first and third coordinates to be between 0 and 1 so the curve progresses forward through time.
Can y values overshoot?
Yes. Values below 0 or above 1 can create anticipation or overshoot. EasingBox allows a practical -2 to 2 editing range.