Cubic-bezier easing generator
Design custom CSS easing curves by dragging the control points. Live animation preview, presets and copy the cubic-bezier() value.
cubic-bezier(0.25, 0.1, 0.25, 1)transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);About this cubic-bezier generator
Design your own CSS easing curve. Drag the two control points to shape how an
animation accelerates and decelerates, watch the live preview ball follow the
curve, and copy the cubic-bezier() value straight into your CSS.
How it works
Every CSS easing is a cubic Bézier curve from (0,0) to (1,1), where the x-axis is
time and the y-axis is progress. Moving a control point changes the
speed at that part of the animation. Pulling a point’s y past 0 or 1 makes the
motion overshoot for a springy, “back” feel. The keyword easings (ease,
ease-in, ease-out, ease-in-out) are just specific control-point positions —
they’re included as presets.
When to use it
Default easings are fine, but a custom curve is what makes motion feel intentional — a gentle ease-out for entrances, a slight overshoot for playful UIs. Drop the value into a transition or animation; for the bigger picture read the transitions and animations guide.
FAQ
What do the four numbers mean?
They are the x and y of two control points — cubic-bezier(x1, y1, x2, y2). The curve always runs from (0,0) to (1,1); the control points bend it. x is time and must stay between 0 and 1, while y is progress and can go below 0 or above 1 to create anticipation or overshoot.
How do I use the result?
Copy the cubic-bezier() value into any transition-timing-function or animation-timing-function. For example transition writes as transition all 300ms cubic-bezier(0.16, 1, 0.3, 1).
Why does my curve overshoot past the box?
That's intentional — a y value above 1 or below 0 makes the element move past its target and settle back, which reads as a bouncy or springy motion. The back preset shows this.