Cubic Bezier Editor

How to use Cubic Bezier Editor

1. Drag the two control points, or start from a named easing and adjust.
2. Watch the preview — the feel matters more than the shape of the curve.
3. Copy the cubic-bezier value into your transition or animation.
4. x values must be between 0 and 1; y values may exceed it to produce overshoot.
5. ease-out suits things arriving, ease-in things leaving, linear only continuous rotation.
6. 200–300ms suits most interface transitions; test on a slow device, not just yours.

What the four numbers mean

cubic-bezier(x1, y1, x2, y2) gives the two control points of a curve from (0,0) to (1,1). The horizontal axis is elapsed time and the vertical is progress, so the curve’s steepness at any point is the speed at that moment. A straight diagonal is linear. Pulling the first control point right delays the start; pulling the second point left makes it settle early. The x values must stay between 0 and 1 — time cannot run backwards — but y values may go outside it, which is how you get overshoot and anticipation.

The named easings are just presets

ease is cubic-bezier(0.25, 0.1, 0.25, 1) and is the CSS default — a slightly odd curve nobody would choose deliberately. ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), ease-in-out is (0.42, 0, 0.58, 1). Knowing this means you can start from a named easing and adjust rather than beginning from scratch, and it explains why custom curves so often look better: the defaults were chosen for compatibility, not for feel.

Which curve for which motion

ease-out for anything entering the screen or responding to a click: fast at first, settling gently, which feels responsive because the user sees movement immediately. ease-in for things leaving, where accelerating away reads as departure. ease-in-out for anything that moves and stops within view. Linear only for continuous rotation such as a spinner — anywhere else it reads as robotic, because nothing physical starts at full speed. A y value above 1 in the second control point produces overshoot, which suits playful interfaces and irritates in a form.

Duration matters as much as the curve

Under about 150ms reads as an instant jump rather than a movement; over 500ms a user is waiting for your animation to finish. Most interface transitions belong in 200–300ms, with larger movements taking slightly longer than small ones, which matches physical intuition. And wrap decorative motion in a prefers-reduced-motion query — a beautifully eased animation is still nauseating to someone with a vestibular disorder.