Cubic-Bézier Easing Editor
Design custom cubic-bezier easing curves with a draggable editor and live animation preview.
Drag the two handles to shape the easing curve.
transition-timing-function: —;
animation-timing-function: —;
Everything runs in your browser — nothing is uploaded.
About Cubic-Bézier Easing Editor
The Cubic-Bézier Easing Editor designs custom timing functions for CSS transitions and animations. Drag the two control handles on the curve canvas and the cubic-bezier(x1, y1, x2, y2) value updates live; an animation preview plays the easing next to a linear reference so you can feel the difference, with an adjustable duration and instant replay.
Ten presets cover the common vocabulary — the standard ease, ease-in, ease-out and ease-in-out, plus expressive curves like back and anticipate that overshoot past their endpoints, and material-style accelerate and decelerate ramps. Use them as-is or as starting points to drag into something of your own.
You can also type exact control-point coordinates, hit randomize for inspiration, and copy either the bare cubic-bezier() value or a ready-to-paste CSS rule. The whole editor runs in your browser.
How to use Cubic-Bézier Easing Editor
- Drag the two handles on the curve editor to shape the easing.
- Click Replay and compare the eased animation against the linear reference, adjusting the duration if needed.
- Try the presets — ease, back, anticipate, material and more — for a quick starting point.
- Fine-tune with the numeric control-point inputs for exact values.
- Copy the cubic-bezier() value or the complete CSS snippet.