Cubic Bezier Generator (CSS Easing)

Build CSS cubic-bezier() easing curves with presets, a curve graph and a live animation preview.

What does cubic-bezier() do in CSS?

cubic-bezier(x1, y1, x2, y2) defines the speed curve of a CSS transition or animation. The two control points shape the curve from (0,0) to (1,1): x is time and must stay between 0 and 1, y is progress and may go below 0 or above 1 to create overshoot.

Keyword equivalents

Keyword	cubic-bezier
ease	0.25, 0.1, 0.25, 1
ease-in	0.42, 0, 1, 1
ease-out	0, 0, 0.58, 1
ease-in-out	0.42, 0, 0.58, 1
linear	0, 0, 1, 1

Pick a preset or enter your own numbers, then watch the dot animate with that curve. Use easeOutBack for playful pop-ins and easeOutCubic for natural UI motion.

Frequently asked questions

Why must x be between 0 and 1?

x represents time, and an animation cannot move backwards in time.

What does a y value above 1 do?

The element overshoots its end position and settles back — a "back" or springy effect.

Can I use it in JavaScript?

Yes — the Web Animations API accepts the same cubic-bezier() string as its easing option.