About Cubic Bezier / Easing

Cubic Bezier / Easing lets you choose a named easing preset or drag the four control values, with the curve drawn and a dot animating to match. Copy the cubic-bezier() for a CSS transition or animation.

It runs in the page. Nothing is uploaded.

How to use it

  1. Choose a preset, or edit x1, y1, x2, y2.
  2. Watch the curve and the animated dot; press Play to replay.
  3. Copy the cubic-bezier(), or paste one to edit it.

Common questions

Why can the y values go above 1 or below 0?

That is how 'back' easings overshoot. Only the x values are clamped to 0..1 by CSS.

Which presets are included?

linear, ease, ease-in/out variants, and sine, quad, cubic, expo, and back curves.

Can I import an existing curve?

Yes. Paste a cubic-bezier() string or a preset name.

Is anything uploaded?

No. It is all local.