What does this tool do?
The Cubic Bezier tool lets you visually design the easing curves used in CSS transitions and animations. Drag the two control points to shape the curve and copy the ready-to-use cubic-bezier() value instantly. It is ideal for web designers and frontend developers fine-tuning motion.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How the curve works
The curve runs from a fixed start (0,0) to a fixed end (1,1), shaped by two control points. You adjust P1 (red) and P2 (green) with sliders: the X values stay between 0 and 1, while the Y values can range from -1 to 2. Pushing Y beyond those bounds makes the animation overshoot its target and settle back, creating a springy or bouncy feel. The SVG preview and the transition-timing-function line update in real time.
Presets and practical use
Load standard CSS values like ease, ease-in, ease-out, ease-in-out and linear with one click, then refine them. For a dropdown, ease-out feels natural as it decelerates into place; to draw attention to a button, the bounce-ish curve (0.68, -0.55, 0.27, 1.55) adds lively character. Paste the output straight into your CSS as transition: transform 0.3s cubic-bezier(...). The same value also works in libraries such as Framer Motion.
Frequently asked questions
What do the four numbers in cubic-bezier() represent?
They are the coordinates of two control points in order: x1, y1, x2, y2. The first pair sets point P1, the second sets P2, and together they define the curve's acceleration character.
Why can the Y value go above 1 or below 0?
The Y axis represents animation progress. Going above 1 means overshooting the target and returning, while going below 0 means pulling back first. This is exactly how spring and bounce effects are created.
Is Cubic Bezier Editor free?
Yes. Cubic Bezier Editor and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Cubic Bezier Editor works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.