Cubic Bezier Editor

What this does

This is a visual editor for the four numbers inside CSS cubic-bezier(). The curve is drawn on a square plot — time runs left to right, progress runs bottom to top — with two round handles you drag to move the control points. The curve, the handle lines and the CSS box update as you drag. A second panel animates a dot across a track so you can feel the timing rather than just look at it. The editor opens on the ease curve:

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Which easing presets are included?

Nine buttons sit under the plot. Four are the CSS keywords spelled out as their real curves — linear (0, 0, 1, 1), ease (0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1) and ease-in-out (0.42, 0, 0.58, 1). The rest are borrowed from the classic Penner set: in-quad, out-quint, in-back and out-back. Clicking a preset replaces both control points, and you can carry on dragging from there — presets are starting points, not modes.

How do I make an easing curve for a CSS transition?

1. Click the preset closest to the feel you want. For UI that enters, start from ease-out; for something leaving the screen, ease-in.
2. Drag the first handle to shape the start of the motion and the second to shape the end. Pulling a handle toward its own end of the plot makes that end more abrupt.
3. Set the duration field — it accepts 200 to 3000 ms in 100 ms steps and starts at 1200 ms — and press Play to re-run the dot. The preview does not replay by itself while you drag, so press Play again after each change.
4. Copy the declaration. The same value is valid in the transition and animation shorthands, and in animation-timing-function.

Why can't I drag a handle past the left or right edge?

The two X coordinates are clamped to 0–1 because CSS requires it: a timing function must be a function of time, and letting X leave that range would make the curve fold back on itself and stop being solvable. Y has no such restriction, so the editor allows −0.5 to 1.5 — enough for the anticipation and overshoot curves. Note that the plot's gridlines mark 0 and 1 only; a handle dragged well past 1 can end up above the visible area even though the value is still applied.

What is overshoot and when should I use it?

A control point with Y above 1 pushes the curve past 100% before it settles, so the animated element sails beyond its target and comes back — the little bounce a chip or a modal makes as it lands. Y below 0 does the mirror image: the element pulls back slightly before moving, like a wind-up. out-back (0.175, 0.885, 0.32, 1.275) is the overshoot example; in-back (0.6, −0.28, 0.735, 0.045) is the anticipation one. Use them on discrete, playful elements. On anything that moves often, or on layout that other content sits next to, overshoot reads as sloppy.

How does the preview find the position?

A cubic Bézier gives you x and y in terms of a parameter t, but CSS needs y at a given x. The tool solves t for the current x by bisection over 24 steps, then evaluates y at that t. That is plenty of precision for a 60 fps preview and it matches what the browser will do closely enough that the dot's motion and your transition will look the same.

What else is useful here?

Easing is usually tuned alongside the thing being animated — try the box-shadow generator for hover elevation, the border-radius generator for morphing shapes, or the gradient tool for animated backgrounds. It all runs locally in the page.