Cubic-bezier editor

Tune CSS cubic-bezier easing with draggable-style number controls, a live curve, named presets, and a bouncing preview.

Control points

Presets

CSS cubic-bezier(x1, y1, x2, y2). x is locked to 0–1 (input progress); y can leave 0–1 to overshoot.

Everything runs in this browser.

CSS value

cubic-bezier(0.25, 0.1, 0.25, 1)

Value at x = 0.5: 0.802

How to use

  1. Move the four control-point values or pick a preset.
  2. Watch the curve and the animated dot.
  3. Copy the cubic-bezier() value into your CSS.

What it supports

CSS's cubic-bezier(x1,y1,x2,y2): x is clamped to 0–1 (input progress); y may range −2–2 for overshoot. The preview animates a marker, not a real transition — paste the value to use it.

Related tools

Related guides