Cubic Bezier Generator
Drag the control points to shape a cubic-bezier easing curve, preview the motion live with an animated box, and copy the CSS timing-function or JS values.
>_ USAGE GUIDE
Drag the two control points to shape a cubic-bezier easing curve and preview the rhythm live with a small box that moves back and forth. When it looks right, copy it as a CSS timing-function or as four JS numbers for an animation library or your own interpolation.
The four parameters (x1, y1, x2, y2) are the control-point coordinates: x is progress along the time axis and y is the fraction completed. x must stay within 0–1 — going outside makes the curve an invalid easing function (a browser cannot handle time going backward or jumping). y is unrestricted, so pushing y above 1 or below 0 creates overshoot: the value shoots past the target before settling, which is the familiar bounce or spring feel. The presets help as anchors — linear is constant speed, ease eases slightly at both ends, and ease-in-out eases symmetrically, slowing at the start and the end.
- Pick a preset or start fresh: begin from something like
ease-in-out - Drag the two control points: adjust
(x1,y1)and(x2,y2) - Watch the preview: the box loops so you can feel the pacing
- Compare curves if needed: view several side by side
- Copy the CSS or JS values: choose the output you need
>_ FAQ
Q1 · What do the four cubic-bezier values mean?
They are the coordinates of the start and end control points: (x1, y1) and (x2, y2). x is progress along the time axis (0 to 1) and y is the fraction completed at that moment. The actual shape is this cubic Bezier, running from (0,0) to (1,1).
Q2 · Why can't I drag a control point beyond a certain range?
Because x is clamped to 0–1, which a valid easing function requires: time may only move forward, never backward or outside the interval. So you are stopped horizontally. Vertically (y) is unrestricted so you can overshoot for a bounce — that asymmetry is intentional.
Q3 · How do I get a bounce or spring effect?
Push y above 1 or below 0 so the curve overshoots the target before settling. For example cubic-bezier(0.34, 1.56, 0.64, 1) has a clear bounce. For a springier feel, let both control points overshoot slightly on the vertical axis, producing an overshoot-then-settle rhythm.
Q4 · What is the difference between ease and ease-in-out?
ease moves at different speeds at each end — a quicker start and a slower finish — and is the CSS default. ease-in-out eases symmetrically, slow at both start and end with a faster middle. Use ease-in-out for a gentler finish and ease for the browser's default feel.
Q5 · Should I copy the CSS or the JS values?
For a CSS animation or transition only, copy the timing-function, e.g. transition: all .3s cubic-bezier(...);. If you interpolate by hand in a JS animation library, canvas or game loop, copy the four numbers [x1, y1, x2, y2] to compute progress yourself. Both outputs describe the same curve.