Cubic Bezier Generator
Build CSS easing curves with a live animated preview.
Custom easing curves
CSS easing shapes how an animation speeds up and slows down, and cubic-bezier gives you full control with four numbers. The right curve makes motion feel natural rather than mechanical.
Set the four control values and the preview box animates on a loop with your curve, so you can feel the easing. Copy the cubic-bezier() straight into a transition or animation.
Expressive and private
The CSS is generated in your browser, so nothing you enter is uploaded.
Frequently Asked Questions
What is cubic-bezier?
A CSS timing function defined by four numbers that shape how an animation accelerates and decelerates.
What ranges are valid?
The X values must be between 0 and 1; the Y values can go beyond for overshoot effects.
Can I copy the value?
Yes. The cubic-bezier() function is shown and one click copies it.
Browse the full set of free, private, in-browser tools.