CSS Cubic Bezier Editor
Edit CSS easing curves with draggable control points, live preview and copyable output
Drag the points, or focus one with Tab and nudge it with the arrow keys — holding Shift makes each step ten times bigger.
About CSS Cubic Bezier Editor
CSS ease is not a gentle curve — it is cubic-bezier(0.25, 0.1, 0.25, 1), and at the halfway point in time it has already covered 80.2% of the distance. The two endpoints are locked at (0,0) and (1,1), so only the two control points are yours to move. x must stay within 0–1 or the browser throws the whole declaration away as invalid, while y is free to leave that range and produce overshoot.
How to use CSS Cubic Bezier Editor
- 1
Drag the cyan and violet control points on the grid, or focus one with Tab and nudge it with the arrow keys.
- 2
Or pick a named preset from the dropdown — linear, ease, easeOutBack, material-standard and more.
- 3
Paste an existing cubic-bezier() into the import box and press Apply to load it; Reverse mirrors the curve into its opposite.
- 4
Watch the movement, progress bar and fade lanes, and set the duration slider to the length your real animation uses.
- 5
Drag the sampler slider to read f(x) at any progress point, then copy the cubic-bezier() value or the full CSS snippet.
Frequently asked questions
Why can x only be between 0 and 1 when y is unrestricted?
Because x is time. If x left that range the curve could fold back on itself and map a single instant to two progress values, so the spec restricts x1 and x2 to 0–1 and browsers treat anything else as an invalid declaration and drop it. y has no such limit: values above 1 overshoot the target and values below 0 pull back before starting. This tool clamps x for the same reason and rejects out-of-range x on import.
Do keywords like ease-in-out behave differently from a raw cubic-bezier?
No, they are pure shorthand. The spec defines ease-in-out as exactly cubic-bezier(0.42, 0, 0.58, 1), just as ease is (0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1) and linear is (0, 0, 1, 1). There is no hidden behaviour behind the names.
Can I build a bounce or spring with this?
No, and that is a limitation of cubic-bezier itself rather than this tool. A cubic bezier crosses each x exactly once and can overshoot at most once. A real bounce or spring needs repeated oscillations, which requires the linear() function with many stops, keyframes, or JavaScript. The most you can do here is a single overshoot like easeOutBack, which peaks at y=1.0978 around x=0.573.
What is the hollow violet ring in the preview for?
The filled dot is positioned by our own code, solving the curve on every frame. The hollow ring is moved by the browser CSS engine directly from the generated value. If our sampling is correct the two overlap, so the ring is a live correctness check on the maths. A small gap appears only when the transition restarts a frame late or the browser throttles a background tab.