📈 Developer Tools

Cubic Bezier Easing Generator

Drag the control points, or type x1, y1, x2, y2, to build a CSS cubic-bezier() easing visually. Presets and a live preview included. Copy the generated transition-timing-function straight into your CSS. Everything runs in your browser, so nothing you enter leaves the page.

Presets (click to apply)

x1 and x2 snap into 0-1 automatically. y1 and y2 are free (roughly -0.5 to 1.5; values outside that create overshoot).

Function cubic-bezier(.25,.1,.25,1)
CSS transition-timing-function: cubic-bezier(.25,.1,.25,1);

How to use the cubic-bezier easing generator

Drag the two control points on the graph, or type into the x1 / y1 / x2 / y2 fields, and the curve, preview and output code update on the spot. Start from a preset and fine-tune from there.

  • Numbers and graph stay in sync: dragging a point changes the numbers, and typing a number moves the point.
  • x is time, y is progress: the x axis runs 0 (start) to 1 (end) in time, and the y axis is how far the animation has progressed, 0 (start) to 1 (end).
  • Presets: linear is constant speed, ease is the default gentle acceleration, ease-in speeds up, ease-out slows down, and ease-in-out is smooth at both ends.
  • Ready to paste: drop the output into transition or animation-timing-function (e.g. transition: transform .4s cubic-bezier(.25,.1,.25,1);).

Handy for

  • Giving buttons and modals an entrance/exit that feels nicer than the default ease
  • Setting y above 1 to create a bouncy overshoot that passes the end and settles back
  • Turning an easing curve handed over by a designer into a concrete CSS value
  • Managing your own curve as numbers when keywords like ease-in-out aren't enough

The output uses the compact form with the leading 0 and trailing zeros dropped (e.g. cubic-bezier(.25,.1,.25,1)). In CSS this is identical to cubic-bezier(0.25, 0.1, 0.25, 1).

FAQ

Are the values I enter sent to a server?
No. All calculation and drawing happen entirely in your browser. The numbers you type and the points you drag are never transmitted to or stored on any server, so you can use it with confidence.
What do the four numbers in cubic-bezier mean?
The curve always runs from (0,0) to (1,1), and the four numbers are the coordinates of the two control points P1(x1,y1) and P2(x2,y2) that bend it. The x axis is how far along in time you are (0 = start, 1 = end) and the y axis is the animation's progress (0 = start position, 1 = end position). Because x1 and x2 are time, they are limited to 0-1, while y1 and y2 can be anything.
Is it okay for y to go outside 0-1?
Yes. Since y is progress, it may exceed the 0-1 range. Setting y>1 makes the value shoot past the end and settle back (overshoot), and y<0 pulls slightly backward before moving forward (anticipation), which gives you bouncy, lively animations. Only x must stay within 0-1 because it is the time axis.