Cubic-Bezier Editor

How to use the cubic-bezier editor

1. Drag the two handles on the graph. P1 (the first control point) shapes the start of the motion, P2 the end. Time runs from left to right and progress from bottom to top.
2. Or type a value in cubic-bezier() value: a full cubic-bezier(0.4, 0, 0.2, 1), four numbers, or a keyword such as ease-in-out. The fields x1, y1, x2 and y2 edit one coordinate at a time.
3. Start from the Presets menu (CSS keywords, the sine to back families, and Material Design curves) or the keyword buttons. When your curve matches a preset, its name is shown next to the buttons.
4. Watch the Animation preview: the dot on Your curve and the dot on linear travel the same distance in the same Duration. Use Pause/Play and Restart to compare them.
5. Copy the result from CSS timing function, or copy the linear() approximation and choose its number of Segments.

Keyboard: focus a handle and use the arrow keys to move it by 0.01, or 0.1 with Shift.

If your system is set to reduce motion, the animation starts paused. Press Play if you want to run it anyway.

What cubic-bezier() means

A CSS easing function maps the elapsed time of a transition (0 to 1) to its progress (0 to 1). cubic-bezier(x1, y1, x2, y2) describes this mapping with a cubic Bézier curve that starts at (0, 0), ends at (1, 1) and is pulled by two control points, P1 = (x1, y1) and P2 = (x2, y2).

• x values are times and must stay between 0 and 1, otherwise the function would not be a valid timing curve. The editor keeps them in range.
• y values are progress and may go below 0 or above 1. A y above 1 makes the animation overshoot its target and come back, like the Back curves; below 0 it first moves backwards.
• A steep slope means fast movement, a flat slope slow movement. ease-out starts fast and ends slow, which feels natural for elements entering the screen. ease-in does the opposite and suits elements leaving.

The CSS keywords are shortcuts: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) and linear = (0, 0, 1, 1).

The linear() approximation

The newer linear() function lists progress values at evenly spaced times, for example linear(0, 0.25, 0.5, 0.75, 1), and joins them with straight lines. The tool samples your curve (it solves the Bézier for each time step) and writes those values with three decimals. With 20 to 40 segments the result is visually identical to the curve. The real benefit of linear() is for curves a Bézier cannot draw, like bounces and springs, but it also lets you share one syntax. It works in Chrome and Edge 113+, Firefox 112+ and Safari 17.2+, so keep the cubic-bezier() value as a fallback.