Cubic Bezier Generator
The Cubic Bezier Generator lets you design custom CSS easing curves by dragging two control points.
100% in-browser · no data sent
Watch a live animation play back your curve, start from a familiar preset such as ease-in-out, and copy the finished cubic-bezier() value straight into your transition or animation.
Embed This Tool
Add this tool to your website with customizable styling
How to Use
Start from a preset
Pick a familiar curve such as ease, ease-in-out or a spring-like overshoot as your starting point.
Drag the control points
Move the two handles to reshape the curve. Pull a handle above the top edge or below the bottom edge for an overshoot or anticipation effect.
Preview the motion
The demo replays your easing at the duration you choose, so you can feel the timing rather than guess at it.
Copy the CSS
Copy the generated cubic-bezier() value and drop it into your transition-timing-function or animation-timing-function.
Frequently Asked Questions
What is a cubic-bezier easing curve?
It is the CSS function that decides how an animation speeds up and slows down. The curve maps elapsed time (the horizontal axis) to progress (the vertical axis). The four numbers in cubic-bezier(x1, y1, x2, y2) are the coordinates of two control points; the start point (0,0) and end point (1,1) are fixed.
Can the values go above 1 or below 0?
The Y values can, and that is what creates bounce. A y value above 1 makes the animation overshoot its target before settling; a negative y makes it pull back slightly before moving forward. The X values must stay between 0 and 1, because time cannot run backwards.
How do the CSS keywords map to cubic-bezier?
They are shorthands for specific curves: linear is cubic-bezier(0, 0, 1, 1), ease is (0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1) and ease-in-out is (0.42, 0, 0.58, 1).
Which easing should I use?
As a rule of thumb, use ease-out for things entering the screen so they arrive quickly and settle gently, ease-in for things leaving, and ease-in-out for elements moving between two on-screen positions. Keep UI transitions short — roughly 150–300 ms — so the interface stays responsive.