Cubic-Bezier Easing Generator
Draw custom CSS easing curves with a live animation preview.
Runs entirely in your browser.
Your data never leaves this device and is never sent to our servers.
CSS
An easing curve decides how an animation accelerates, and it is the difference between motion that feels mechanical and motion that feels designed. Drag the two control points and watch a real element move with your curve.
How to use it
- Drag the two control handles to shape the curve.
- Watch the preview animation.
- Copy the cubic-bezier value into your CSS.
Not working as you expect? Report a problem with this tool.
Frequently asked questions
What do ease-in and ease-out actually mean?
ease-out starts fast and slows down — right for things entering the screen. ease-in starts slow and accelerates — right for things leaving. ease-in-out suits movement between two on-screen positions.
Can Y values go outside 0 and 1?
Yes, and that is how you get overshoot and bounce. X values must stay within 0 to 1 because they represent time.
Which curve should I default to?
Something close to ease-out for most interface motion. Linear looks wrong for anything except a continuous loop.