Visually create CSS cubic-bezier() easing curves with a live animation preview.
P1 X
0.42
P1 Y
0
P2 X
0.58
P2 Y
1
cubic-bezier(0.42, 0, 0.58, 1)
Animation preview
Drag the two control points (P1 and P2) on the canvas to shape the easing curve. The cubic-bezier() CSS value updates live. Click a preset for common easing functions. Use Play to preview an animation with your curve.