Cubic-Bezier Easing Editor

Drag the two handles inside the unit square to reshape the easing curve. The preview loops with the live curve.

Curve

P1 (x1, y1) P2 (x2, y2)
x1
0.42
y1
0.00
x2
0.58
y2
1.00

Live Preview

0%50%100%

CSS

cubic-bezier(0.42, 0.00, 0.58, 1.00)

Presets

Drag handles inside the square. Y is clamped to [0, 1]; X is clamped to [0, 1] (CSS allows outside, but clamping keeps it usable).
Copied