OneTaskBy Tim King · Updated
Cubic Bezier Generator CSS Visual Easing Editor
Four-Point Easing Curve With a Live Animation and cubic-bezier() Output
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Cubic Bezier works
This cubic bezier generator CSS visual editor lets you drag the curve instead of guessing numbers. A cubic-bezier() timing function is four numbers describing two control handles, and those four
numbers decide whether an animation feels mechanical, snappy or springy. Drag the sliders to reshape the
curve and the sample below re-runs on every change so you can judge it by eye rather than by arithmetic.
Cubic bezier generator CSS visual: the four numbers
Every CSS transition has a timing function, and the default is ease — a curve someone chose in 1998
that nobody has ever deliberately picked since. cubic-bezier() lets you replace it with any curve you
like, and once you understand what the four numbers mean, tuning motion stops being guesswork.
What the four numbers are. The curve always starts at (0,0) and ends at (1,1): the X axis is time
from start to finish, the Y axis is progress from the old value to the new one. cubic-bezier(x1, y1, x2, y2) positions two control handles between those fixed endpoints — the first pulling the curve away
from the start, the second pulling it into the end. A steep section means the property is changing
quickly at that moment; a flat section means it has almost stalled.
X is clamped, Y is not. The two X values must stay between 0 and 1, because time cannot run backwards or overshoot the duration. The Y values have no such limit. A Y above 1 makes the property overshoot its target and settle back, which is where every "bouncy" or "elastic" CSS animation comes from. A Y below 0 makes it dip backwards before starting — the anticipation wind-up that animators use before a fast movement.
The named keywords are just presets. 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). There is no magic in the keywords; they are shorthand for four numbers you could have
typed yourself.
Ease-out is the right default for interfaces. Something entering the screen or responding to a click should start fast and decelerate, because the movement is a consequence of an action the user already took — they want to see the result, not watch it wind up. Reserve ease-in for elements leaving, where the slow start reads as the element gathering itself to go, and keep ease-in-out for movements that both start and end on screen.
Duration and curve are one decision. A curve that feels precise at 200ms feels sluggish at 800ms, and an overshoot needs enough time to be legible — under about 400ms a spring reads as a glitch rather than a bounce. Tune both together, which is why the duration is a slider here rather than a fixed value.
Where springs beat beziers. A cubic bezier can only bounce once, because it is a single curve with
two handles. Repeated oscillation needs linear() with many stops, a keyframe animation, or a real
spring physics implementation. If your design calls for a settling wobble rather than a single
overshoot, a bezier is the wrong primitive.
FAQ
What do the four cubic-bezier numbers actually mean?
They are the X and Y coordinates of two control handles. X is elapsed time on a 0-to-1 scale and Y is animation progress on the same scale, with the curve fixed at (0,0) and (1,1). The handles bend the line between those points.
Why can the Y values go above 1 but not X?
Because Y is progress and X is time. Progress above 1 means the property overshoots its target and settles back, which is how bouncy easing works. Time outside 0 to 1 would mean the animation runs backwards or beyond its duration, so browsers reject it.
Which easing should I use for a button or a modal?
Ease-out for anything appearing or responding to input, so the movement starts fast and decelerates. Ease-in for elements leaving the screen. Ease-in-out for things that start and stop on screen, like a panel sliding between two visible positions.
How is cubic-bezier different from the ease keywords?
It is not different — the keywords are named cubic beziers. ease is cubic-bezier(0.25, 0.1, 0.25, 1)
and ease-in-out is (0.42, 0, 0.58, 1). Writing the numbers yourself just lets you pick a curve
outside the five presets.
Can I make a spring that bounces more than once?
Not with a single cubic bezier — two handles can only produce one overshoot. Repeated oscillation needs
the linear() timing function with many stops, a multi-step @keyframes animation, or a JavaScript
spring implementation.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Blob Generator
Make organic blob shapes with border-radius.
CSS Transform Generator
Compose translate, rotate, scale and skew into one transform value.
Flip Card
3D flip card with front and back faces, no JavaScript.
Hover Card Builder
Card hover effects with timing controls, previewed live.