CSS Easing Generator
Drag the two handles to shape a custom easing curve, watch the ball preview it live, and
copy the cubic-bezier() value.
Presets
How it works
The graph plots progress (vertical) against time (horizontal) over one second. Both
handles are draggable directly, and the number fields underneath stay in sync with them
either way; drag with a mouse or finger, or type exact values if you need to match a
specific curve. The same four numbers feed both the SVG path you're looking at and the
real transition-timing-function applied to the preview ball, so what you see
is the actual easing, not an approximation.
Everything runs on your browser's own CSS transition engine. No animation state or curve data is sent anywhere.
Common questions
What do the two handles control?
A cubic-bezier easing curve is defined by two control points, each with an x (time, 0 to 1) and y (progress, unbounded but usually 0 to 1) coordinate. Dragging a handle sets that point directly; the four numbers shown are exactly what goes inside cubic-bezier().
Can the curve overshoot past 100%?
Yes, if a control point's y value goes above 1 or below 0, the animation will briefly overshoot its end value or dip below its start value before settling, the "bounce" or "anticipation" effect. Drag a handle above or below the graph to try it.
Is this sent anywhere?
No, the curve and preview animation run entirely in your browser's CSS engine. Nothing is uploaded.