FREE · DESIGN TOOLS
Cubic Bézier Editor.
Edit timing-curve handles, preview motion and copy a CSS easing function.
cubic-bezier(0.25, 0.1, 0.25, 1)X handles stay between 0 and 1. Y handles allow overshoot from −3 to 3. Your reduced-motion setting disables the animation.
How to use Cubic Bézier Editor
Start the tool with its controls. Recording permissions are requested only after your click; all generated files stay in this page.
How it works
Edit timing-curve handles, preview motion and copy a CSS easing function. X values 0–1, Y overshoot −3 to 3, duration 0.1–10 seconds. Reduced-motion preferences are respected. No source input is sent to an editing service.
Example
Use the displayed controls and inspect the result.
Questions about Cubic Bézier Editor
Is Cubic Bézier Editor free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
X values 0–1, Y overshoot −3 to 3, duration 0.1–10 seconds. Reduced-motion preferences are respected. Review the result before using it in your work.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.