Easing Curve Editor

Edits a cubic-bezier or spring curve against an animated preview and emits the CSS timing function.

Drags a cubic-Bézier easing curve and shows what it does to real motion — a block animated by the browser’s own compositor, plus a strip of the same curve sampled at even time steps so the shape is legible rather than just felt.

🔒 Runs entirely in your browsereasinganimationcssbezier

Drag either point, or focus one and use the arrow keys — shift steps ten times further. The shaded band is 0 to 1; the space above and below is the overshoot that only exists because CSS clamps x and leaves y free.

X1 0.34Y1 1.56X2 0.64Y2 1.00

X is clamped to 0–1 because CSS requires it — outside that range the whole declaration is invalid and the browser drops it. Y is deliberately free: values past 1 give overshoot and values below 0 give anticipation, which is most of why anyone edits a curve by hand.

Duration 900ms

The strip below is the same curve sampled at twenty equal time steps. Marks bunching up means the animation is slow there and spreading out means it is fast — which is the curve’s shape stated as motion.

Presets

CSS

transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);

How to use it

Drag the two control points
Or focus one and use the arrow keys — shift moves ten times as far. The numbers underneath take typed values if you have a curve to reproduce.
Watch the strip, not the block
A moving block is hard to read. The marks below it are the curve at twenty equal time steps: bunched means slow, spread means fast.
Copy the value or the whole transition
If your points land exactly on a keyword — `ease`, `ease-in-out` — that keyword is emitted instead, because it is shorter and says the intent.

Common questions

Why can I not drag x outside 0–1?

Because CSS forbids it. An x outside that range makes the whole declaration invalid and the browser drops the property — so the tool clamps rather than letting you build something that silently does nothing.

What is y outside 0–1 for?

Overshoot above 1 — the element goes past its target and settles back — and anticipation below 0, where it pulls back before moving. Those two are most of the reason anyone edits a curve rather than taking a keyword.

Is the preview accurate?

Yes — it hands the timing function to the browser as a CSS animation, which is the same code path your `transition` will take. Sampling the curve in a JavaScript loop would look similar and would not be the same thing.

Can I get a spring or a bounce?

Not a real one. A cubic Bézier has two control points and can overshoot once; a spring oscillates and needs `linear()` with many stops, or a physics-based animation library. The overshoot here is the closest a single curve gets.