Cubic Bezier Generator
Design custom CSS easing curves by dragging two control points, preview them and copy the cubic-bezier() value.
Horizontal axis: time (0 → 1). Vertical axis: progress (−0.75 → 1.75).
Same as the CSS keyword ease.
Preview
CSS
How it works
A CSS cubic-bezier() easing curve is defined by two control points — P1
(X1, Y1) and P2 (X2, Y2) — that bend a line running from 0,0 to 1,1. Drag the two handles
on the graph (or type exact numbers, or press the arrow keys while a handle is focused)
and the curve, the animated preview and the CSS snippet update instantly. The X values
are the time axis and must stay between 0 and 1; the Y values are progress and may go
below 0 or above 1, which is how you get an anticipation or overshoot "back" easing.
The linear track underneath the preview gives you a reference so you can feel how much
your curve accelerates. Everything runs in your browser with plain JavaScript — nothing
is uploaded, and the page works offline once loaded.
Frequently asked questions
How do I make a custom cubic-bezier easing curve for CSS?
Drag the two control points on the graph until the curve has the acceleration you want, or type exact numbers into the X1, Y1, X2 and Y2 fields. The preview animates a dot with your curve next to a linear reference so you can feel the difference, and the CSS box gives you a ready-to-paste transition and animation-timing-function declaration. Press Copy value to grab just the cubic-bezier() function.
What is the cubic-bezier value for ease-in-out?
The CSS keyword ease-in-out equals cubic-bezier(0.42, 0, 0.58, 1). The other built-in keywords are linear = cubic-bezier(0, 0, 1, 1), ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = cubic-bezier(0.42, 0, 1, 1) and ease-out = cubic-bezier(0, 0, 0.58, 1). All of them are in the preset list, and whenever your curve matches one the tool tells you which keyword you can use instead.
Can cubic-bezier values be negative or greater than 1?
The Y values can. Y is the animation progress, so a negative Y1 pulls the element backwards before it starts (anticipation) and a Y2 above 1 overshoots the end position before settling — that is how back and bounce style easings work. The X values are time and must stay between 0 and 1; this editor clamps them automatically and tells you when it does.