Aller au contenu
∿

Cubic Bezier Editor

Design CSS cubic-bezier easing curves.

CurveP1 · P2
Preview

Play moves the box with this easing from left to right.

x1
y1
x2
y2
transition-timing-function
cubic-bezier(0.25, 0.1, 0.25, 1) transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);

x1 / x2 are clamped to [0, 1] per the CSS spec. y1 / y2 may go outside that range for overshoot. Drag the handles or edit the numbers.

À propos de Cubic Bezier Editor

A cubic-bezier editor lets you visually craft CSS timing functions by dragging two control points. X stays in [0, 1] per the CSS spec; Y may overshoot for bounce-like motion. toco.tools pairs a curve canvas with numeric inputs, standard and custom presets, and a playable preview, then outputs copy-ready `cubic-bezier(...)`. Everything runs in your browser—nothing is uploaded.

Comment l'utiliser

  1. Pick a preset or drag the handles
  2. Play the preview to feel the easing
  3. Copy the cubic-bezier CSS

FAQ

What is cubic-bezier?

A CSS timing function that defines acceleration via `cubic-bezier(x1, y1, x2, y2)`.

What if Y is outside 0–1?

You get overshoot or undershoot—the animated value briefly goes past the target.

Are settings sent externally?

No. All processing runs in your browser.

Are the ease presets the same as CSS keywords?

Yes. ease, ease-in, ease-out, ease-in-out, and linear match the standard browser cubic-bezier values.