Cubic-bezier editor

Cubic-bezier editor features

• 01

  Drag the curve, see the motion

  Two draggable handles control the start and end of the bezier. The accompanying ball animation plays the curve at the duration you choose, so you can preview overshoot and ease-out feel without leaving the page.

• 02

  All the standard presets

  Start from CSS's built-in ease, linear, ease-in, ease-out, and ease-in-out — then tweak. The preset switches back to "custom" automatically when you move a handle.

• 03

  Copy CSS with one click

  The cubic-bezier() value updates live with two-decimal precision, ready to drop into transition-timing-function or animation-timing-function.

Cubic-bezier editor FAQ

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

Bezier control points outside the 0–1 range produce overshoot and undershoot effects — the curve goes past its endpoint before settling. This is how "bouncy" easing curves are made; the X axis still has to stay in 0–1.

How do I use the output?

Copy the cubic-bezier(...) string and paste it into any CSS transition-timing-function or animation-timing-function value. It works in every modern browser.

Is the preview accurate to what CSS will do?

Yes — the preview animates a ball from 0 to 100% using the same cubic bezier formula browsers use for transitions. The duration slider lets you feel slow vs fast curves before committing.

What does ease-in-out actually mean?

Ease-in-out starts slow, speeds up in the middle, and slows down again at the end — the cubic-bezier(0.42, 0, 0.58, 1) curve. It's the default for most polished UI motion because it mirrors how real physical objects accelerate and decelerate.