About the Cubic Bezier Easing Editor
This cubic bezier generator builds custom easing curves for CSS transitions and animations. Choose one of the five CSS keywords or a popular named easing (sine, quad, cubic, expo, back), or enter your own control points P1 (x1, y1) and P2 (x2, y2). The chart plots animation progress against time, a preview ball moves with the curve, and the tool gives you the cubic-bezier() value plus a ready-made transition declaration.
It is for front-end developers, motion designers and anyone tuning UI animation — menus that slide in, modals that pop, buttons that bounce. Being able to read the exact progress at any moment helps you match timings between elements, and the overshoot output tells you when a y value outside 0–1 makes the element travel past its target and spring back.
The maths follows the CSS Easing Functions specification: x values are limited to 0–1 so time always moves forward, while y values may go below 0 or above 1 to create anticipation and overshoot effects.
How to use the cubic bezier easing editor
- 1Pick a preset or choose Custom and enter x1, y1, x2 and y2.
- 2Watch the chart and preview: steep sections move fast, flat sections move slowly.
- 3Use y values above 1 or below 0 for overshoot or anticipation.
- 4Set the duration and property to build the transition declaration.
- 5Copy the cubic-bezier() value or the full transition CSS.
Formula and method
A CSS cubic Bézier easing is a curve from P0 = (0, 0) to P3 = (1, 1) shaped by two control points P1 = (x1, y1) and P2 = (x2, y2). The x axis is the fraction of the duration that has elapsed and the y axis is the fraction of the change that has been applied. For a curve parameter t between 0 and 1, the point on the curve is B(t) = 3(1−t)²t·P1 + 3(1−t)t²·P2 + t³ (the P0 term is zero).
To find the progress at a given time, the tool solves Bx(t) = time for t by bisection — x1 and x2 are restricted to 0–1, which guarantees Bx always increases and the answer is unique — and then evaluates By(t). The highest and lowest progress are found by sampling the curve at 401 evenly spaced times.
- P1 = (x1, y1)
- First control point; shapes the start of the motion
- P2 = (x2, y2)
- Second control point; shapes the end of the motion
- t
- Curve parameter from 0 to 1 (not the same as time)
Worked examples
Overshooting “back” curve
With y1 = 1.56 the curve climbs above 100%. Halfway through the duration the element is already at about 108.7% of its travel, peaks near 109.8% and then eases back to exactly 100% at the end.
The CSS “ease” keyword
These control points are exactly the CSS default ease curve, so the keyword is suggested instead. It front-loads the motion: halfway through the time, the animation is already about 80% complete.
easeInOutCubic at one quarter of the time
A strong ease-in-out starts slowly: after 25% of the duration only about 7% of the change has happened. The curve is symmetric, so it is at 50% exactly halfway and never leaves the 0–100% range.
Frequently asked questions
What do the four numbers in cubic-bezier() mean?+
They are the coordinates of the two control points: cubic-bezier(x1, y1, x2, y2). x is time (0 = start, 1 = end of the duration) and y is progress. The curve always starts at (0, 0) and ends at (1, 1); the control points bend it to make the motion faster or slower at different moments.
What are the CSS easing keywords as cubic-bezier values?+
ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), ease-in-out is (0.42, 0, 0.58, 1) and linear is (0, 0, 1, 1). ease is the default for transitions when you do not specify a timing function.
Why can y go above 1 but x cannot?+
x is time, and the curve must move forward in time to be a valid function, so the specification limits x1 and x2 to 0–1. y is the animated value, which can temporarily overshoot (above 1) or pull back (below 0) to create springy, bouncy effects.
Which easing should I use for UI animations?+
Elements entering the screen usually feel best with ease-out (fast start, gentle stop) and elements leaving with ease-in. ease-in-out suits things that move from one on-screen position to another. Keep most UI transitions short — a few hundred milliseconds — so the interface still feels responsive.
Can I make a bounce or spring with cubic-bezier?+
You can make a single overshoot with y values above 1, like cubic-bezier(0.34, 1.56, 0.64, 1). A multi-bounce or true spring needs keyframes or the CSS linear() function, which approximates any curve with many points.