Cubic Bezier Editor

How to use it

1. Drag the pink handle to move the first control point and the amber handle to move the second one.
2. The canvas draws the unit square, the resulting curve and two guide lines from the corners to the handles.
3. Fine-tune x1, y1, x2 and y2 in the number fields. x1 and x2 stay inside 0 to 1 because CSS rejects anything else.
4. Press Play to run all six tracks at once. The first track is your curve; the five below are the CSS keywords.
5. Copy the generated CSS. When the values match a keyword exactly, the snippet says so.

Common use cases

• Shaping an overshoot — push y1 above 1 or y2 below 0 to make an element travel slightly past its target before settling.
• Reproducing a motion from a design file — type the four numbers a designer gave you and check the curve before writing any code.
• Comparing against keywords — run the tracks together to see how far your curve sits from ease-out.
• Debugging a sluggish transition — a curve that stays near the diagonal for most of its length reads as slow; the canvas shows that at a glance.
• Building a timing token set — settle on two or three curves here and paste the same values into your design tokens.

Why it stays private

The curve is evaluated and drawn in your browser. No values, project names or snippets are sent anywhere.

FAQ

Q: Why are x1 and x2 locked between 0 and 1 but y is not? A: CSS requires the x coordinates of a cubic-bezier to sit inside 0 to 1, otherwise the declaration is invalid. The y coordinates may go outside, which is what produces overshoot and undershoot.

Q: Is the preview the same thing the browser will do? A: It uses the same curve definition, sampling the cubic-bezier for x and reading y. Your browser applies the same math, so the shape and timing match.

Q: Can I use the values in keyframes as well? A: Yes. The generated snippet includes an animation-timing-function form alongside the transition form, and the same four numbers work in both places.