Cubic-bezier easing generator
This tool crafts custom CSS easing curves and gives you the exact cubic-bezier() value for your transitions and keyframe animations. It is for developers who want motion that feels right — snappy, smooth or springy — rather than the handful of built-in keywords. Drag the curve, preview a moving dot, and copy the timing function.
How it works
A CSS easing curve is a cubic Bézier defined by four numbers: cubic-bezier(x1, y1, x2, y2). The curve always begins at the fixed point (0, 0) and ends at (1, 1); the two control points P1 = (x1, y1) and P2 = (x2, y2) bend the path between them. The x axis is time (progress from 0 to 1) and the y axis is the animated value. Because time only moves forward, the tool clamps x to 0–1, but it lets y go below 0 or above 1 so you can build overshoot and anticipation. Values are rounded to two decimals, and the preview animates a dot using your exact curve.
Example
Dragging the handles to the back-out preset gives control points (0.34, 1.56) and (0.64, 1):
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);The y value of 1.56 overshoots past the end, so the element shoots slightly past its target and settles back — a gentle spring.
| Preset | cubic-bezier(…) |
|---|---|
| ease | 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 |
| linear | 0, 0, 1, 1 |
| back-out | 0.34, 1.56, 0.64, 1 |
Everything runs locally in your browser — nothing is uploaded.