Cubic bezier editor
Runs entirely in your browser. Your files and data never leave your device.
About this tool
Drag the two control points on the curve to shape a custom easing, or start from a preset like ease-in-out and tweak it from there. The four number inputs stay in sync with the handles, so you can fine-tune values by hand or by eye. A preview animation plays your easing side by side with a linear reference, which makes it easy to see how much the curve speeds up or slows down motion compared to a constant pace.
How does the curve editor work?
A CSS cubic-bezier() easing is defined by two control points, (x1, y1) and (x2, y2), with the curve’s start and end fixed at (0,0) and (1,1). The x coordinates represent time and are always clamped to the 0-1 range CSS requires, but the y coordinates, which represent progress, are allowed to go past that range in this editor (roughly -1 to 2) so you can design an overshoot effect where motion bounces past its target before settling, like the built-in ease-in-back and ease-out-back presets. Behind the scenes, the tool evaluates the curve the same way a browser does: for a given moment in time it solves for the matching point on the curve using a few rounds of Newton’s method, falling back to plain bisection if the curve is too flat for Newton to converge quickly.
You can also paste a cubic-bezier(...) value straight into the value inputs and the tool will parse it back into draggable handles, as long as the x values fall in the valid 0-1 range.
Is anything I draw uploaded anywhere?
No. The curve editor, the math behind it, and the preview animation all run entirely in your browser. Nothing you draw gets uploaded anywhere, and there’s no server involved at any point.
Use it to tune CSS transitions and animations: a snappy ease-out for a button press, a bouncy overshoot for a modal entrance, or a custom curve that matches a design tool’s motion spec. Copy the finished cubic-bezier() value straight into your stylesheet. See the MDN easing-function reference for how it fits into transition-timing-function and animation-timing-function, or the cubic-bezier() function reference for the exact syntax.