CSS Cubic Bezier Editor
Create and preview cubic-bezier easing values.
Design easing curves
Easing decides whether motion feels cheap or considered, and a cubic-bezier curve controls it — but the four numbers are impossible to picture in the abstract. This editor lets you shape the curve and preview it on a real animation.
Adjusting the control points while watching an element move makes the abstract concrete: you can feel the difference between a gentle ease-out and a playful overshoot. When it feels right, copy the cubic-bezier() timing function.
Copy-ready easing
The four control-point numbers become a cubic-bezier() you can paste into any transition or animation. The curve is edited in your browser, nothing uploaded.
Frequently asked questions
What do the four numbers mean?
They are two control points, x1, y1, x2, y2. The x values are time and must stay between 0 and 1; the y values are progress and can go outside 0 to 1 to overshoot.
How do I make a bounce or overshoot?
Push y2 above 1, for example cubic-bezier(.34, 1.56, .64, 1). The motion passes its end point and settles back, which the preview dot shows.
What are the named easings as bezier values?
ease is .25,.1,.25,1 (the default here), ease-in is .42,0,1,1, ease-out is 0,0,.58,1, and ease-in-out is .42,0,.58,1.
Related tools
Practical utilities for front-end design and implementation work.