About cubic-bezier easing
The Cubic Bezier Generator lets you craft custom CSS easing curves by dragging two control points, with a live animation preview that replays your curve. Copy the resulting <code>cubic-bezier()</code> value to use as a transition or animation timing function. Values beyond 0–1 create overshoot (bounce) effects. It runs entirely in your browser.
How Cubic Bezier works
How to build an easing curve
- Drag the two handles to shape the curve, or start from a preset (ease, ease-in-out, back…).
- The ball above replays the motion so you can feel the easing.
- Copy the
cubic-bezier()value into your transition or animation.
What cubic-bezier controls
A cubic-bezier timing function maps time (x, 0→1) to progress (y, 0→1). A steep start means a fast beginning; pulling a handle past 1 (or below 0) overshoots, giving a springy, bouncy feel.
Where to use it
Use the value anywhere a timing function is accepted — transition-timing-function, the animation shorthand, or animation-timing-function — for motion that feels more natural than the built-in keywords.
Common uses
- Design custom transition easing
- Create springy, overshoot motion
- Fine-tune animation timing functions
- Match a brand’s motion style
- Replace generic ease/linear curves
- Preview easing before using it
- Learn how bezier easing works
- Copy a ready cubic-bezier() value
Frequently asked questions
How do I make a custom easing curve?
Drag the two handles to shape the curve; copy the cubic-bezier() value into your CSS timing function.
What does cubic-bezier do?
It defines how an animation accelerates and decelerates over its duration.
How do I make a bounce/overshoot effect?
Drag a handle above 1 or below 0 so the curve overshoots, then settles.
Where can I use the value?
In transition-timing-function or the animation shorthand, anywhere a timing function is accepted.
What are the four numbers?
They are the x and y coordinates of the two control points: x1, y1, x2, y2.
Is anything uploaded?
No — it runs entirely in your browser.
Does it work in all browsers?
Yes — cubic-bezier timing functions are widely supported.
Is it free?
Yes — completely free with no sign-up.