Cubic Bezier Editor

Design CSS easing curves

Drag the two control points to shape a CSS cubic-bezier() easing curve. Watch a real element animate with it, read the four values, and copy the string. Everything runs locally in your browser.

Curve
cubic-bezier(0.25, 0.1, 0.25, 1)
No network calls. This page works fully offline.
Live preview
1200ms

The x axis is time (0 to 1), the y axis is progress. Control point coordinates x must stay within 0 and 1; y can go outside that range to create overshoot and anticipation.