Cubic Bezier Generator
Drag the handles, feel the easing.
Live preview
What the four numbers mean
cubic-bezier(x1, y1, x2, y2) describes how an animation's progress accelerates over time. The x axis is time (0 = start, 1 = end, fixed by the spec), the y axis is progress. P1 shapes the beginning (ease-in), P2 the ending (ease-out). The classic "material design" spring effect comes from y values outside 0-1 — the curve overshoots, so the element moves past its target and settles back.
Only the y values are free; x must stay within [0, 1] or browsers reject the curve. The gray diagonal is the linear reference — the further your curve bends away from it, the more dramatic the easing.
FAQ
Why does my animation not run when I paste the CSS?
The curve is only an easing function — it must be applied to a transition or animation property, e.g. transition: transform 0.4s cubic-bezier(...).
Which preset is closest to iOS spring?
Try something like cubic-bezier(0.34, 1.56, 0.64, 1) — the y > 1 overshoot gives the springy settle. Fine-tune from there by feel.