Free · Live · Nothing uploaded

CSS easing & cubic-bezier generator

Drag the curve, watch the motion live, and copy a ready-to-use cubic-bezier() timing function.

1.0s
0.00
0.00
0.00
0.00

How to design a custom CSS easing curve

Drag the two handles to shape the curve, or start from a named preset and fine-tune it.

🎯

1. Pick a preset

Start from ease-in-out, back, or another familiar curve.

🖐️

2. Drag the handles

Shape the curve — the ball preview updates live.

📋

3. Copy the CSS

Drop the cubic-bezier() value into any transition or animation.

A CSS easing curve is a cubic bezier running from (0,0) to (1,1); the two control points bend how quickly the animated value changes over time. The x values of both control points must stay between 0 and 1, but the y values can go outside that range — that's what produces a slight overshoot ("back") or anticipation effect. The same cubic-bezier() value works for both transition-timing-function and animation-timing-function. For the shapes those transitions might animate, try the CSS Shadow Generator or Flexbox & Grid Generator.

Easing generator FAQ

What is a cubic-bezier timing function?

A curve from (0,0) to (1,1) defined by two control points, cubic-bezier(x1, y1, x2, y2). X values stay within 0–1; y values can exceed that range for overshoot effects.

Can I use this for both transitions and animations?

Yes — the same value works as transition-timing-function or animation-timing-function.

Is anything uploaded?

No — this is a static CSS generator that runs entirely in your browser.