Cubic-Bezier Easing Editor
Design CSS easing curves with draggable handles, presets, and a live animation preview.
Drag the two handles to shape the easing curve.
X1
Y1
X2
Y2
1s
Animation Preview
CSS Output
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Use as transition-timing-function or animation-timing-function in your CSS.
About Cubic-Bezier Easing Editor
Design CSS easing curves with two draggable control handles, easing presets, numeric inputs, and a live animation preview. Copy the cubic-bezier() and transition-timing-function CSS.
Cubic-Bezier Easing Editor is a free tool in the Design Tools category on BrowseryTools. It runs entirely in your browser — your data is never uploaded to a server, and there's no registration, no ads, and no watermarks, so your privacy is fully preserved.
Frequently asked questions