Cubic Bezier Easing Generator
Build cubic-bezier easing from four control values, with motion preview and CSS copy
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Use four control values (x1, y1, x2, y2) to build the acceleration and deceleration curve (cubic-bezier) for CSS animations. Get a feel for it with the easing-curve graph and a live moving preview side by side, then copy the transition or timing-function CSS right away.
How to use
- Click a preset like ease-in-out or back-out to get a starting point.
- Fine-tune the curve with the x1, y1, x2, y2 sliders (or number inputs).
- Check the motion with the curve graph and the back-and-forth preview shape.
- Set a duration, then copy the transition or timing-function CSS.
FAQ
- Can y values go above 1 or below 0?
- Yes. The x values are the time axis and must stay between 0 and 1, but the y values represent progress and can exceed 1 or drop below 0. That's what creates the 'overshoot' effect of passing the target and springing back.
- Does the preview motion match reality?
- The preview is rendered with the browser's actual CSS transition, so it moves exactly as it would when applied to a website in the same browser. The shape repeatedly travels back and forth to show the curve's acceleration and deceleration.
- Should I copy the transition or the timing-function?
- If you need a single line that includes the duration, use 'Copy transition'; if you want just the easing curve for another rule, use 'Copy timing-function'. Both are exact, ready-to-use CSS, not rough approximations.