Cubic Bezier Generator & Easing Editor
Free cubic bezier generator — drag the easing curve, race it against a linear ghost, then copy the cubic-bezier() CSS. 24 named easings built in.
🔒 100% in your browser — nothing is uploaded. The preview is driven frame-by-frame by solving the bezier (Newton-Raphson) so true overshoot & spring motion render accurately. Handle y is allowed from −0.7 to 1.7 so named "back" easings fit. Your last curve & settings are saved on this device.
Why you’ll love Cubic Bezier Generator & Easing Editor
Instant & free
No signup, no paywall, no limits — Cubic Bezier Generator & Easing Editor works the moment the page loads.
Completely private
Everything runs in your browser. Nothing you enter is ever uploaded or stored on a server.
Works on any device
Fully responsive and touch-friendly — use it on your phone, tablet or desktop.
Copy & export
Grab the CSS, SVG or a PNG in one click and drop it into your project.
How to use it
Open it
No download and no login — the tool is ready right at the top of this page.
Use it
Enter your details or start interacting. Everything updates live as you go.
Get your result
Copy, download or share your result in a single tap. That’s it.
About Cubic Bezier Generator & Easing Editor
This cubic bezier generator is a hands-on easing editor for CSS: drag the two control handles on the curve and the cubic-bezier(x1, y1, x2, y2) value updates live, together with a ready-to-paste transition-timing-function line. For precise work you can type exact coordinates into the number fields or nudge a focused handle with the arrow keys (0.01 per press, 0.05 with Shift).
The editor allows handle y-values from −0.7 to 1.7, so anticipation and overshoot ("back") easings fit on the canvas. The preview doesn't just replay a CSS transition — it solves the curve mathematically every frame (Newton–Raphson with a bisection fallback), driving a marker along the track, a dot riding the curve itself, and a live time → progress readout. A dashed linear ghost races alongside so you can see exactly how your easing differs from constant speed.
Beyond the five CSS keywords (linear, ease, ease-in, ease-out, ease-in-out), a built-in library holds 24 named easings — the Sine, Quad, Cubic, Quart, Quint, Expo, Circ and Back families with their standard easings.net coordinates. A reverse button mirrors any curve (turning an ease-in into its matching ease-out), the duration slider runs from 0.3s to 3s, and an optional scale + opacity demo shows the easing on a second kind of motion. Your last curve is saved on your device, and reduced-motion preferences are respected.
Popular uses
Frequently asked questions
They are the coordinates of the two control points, P1 (x1, y1) and P2 (x2, y2), of a cubic Bézier curve that runs from (0,0) to (1,1). The x-axis is time as a fraction of the duration and must stay between 0 and 1; the y-axis is animation progress and may go outside that range for overshoot. The CSS keyword "ease", for example, is cubic-bezier(0.25, 0.1, 0.25, 1).
Only partially. A single cubic curve can overshoot the target once — easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), pushes progress past 100% and settles back — but it cannot oscillate multiple times. A true multi-bounce spring needs CSS keyframes, the newer linear() timing function with many sample points, or JavaScript animation.
The x-axis represents time, and time must move forward — the CSS spec requires x1 and x2 to stay within 0–1 so the curve remains a valid function of time. The y-axis is output progress: values below 0 pull the element behind its starting point (anticipation) and values above 1 push it past the target (overshoot). This editor allows −0.7 to 1.7, enough to fit every standard "back" easing.
They look similar but feel different. ease — cubic-bezier(0.25, 0.1, 0.25, 1) — is asymmetric: it accelerates quickly and then spends most of the duration gently landing, which suits elements appearing on screen. ease-in-out — cubic-bezier(0.42, 0, 0.58, 1) — is symmetric, starting and ending equally slowly. Load both presets here and race them against the linear ghost to feel the difference.
A reliable default: ease-out variants for elements entering or responding to a tap (the fast start feels responsive), ease-in for elements leaving the screen, and ease-in-out for things moving between two visible positions. Keep durations around 150–300ms for small UI elements and longer only for large movements — the duration slider lets you feel the pairing before you commit.
Cubic Bezier Generator & Easing Editor is 100% free — no signup, no watermarks and no usage limits. It’s one of 200+ free tools we build and give away.
Yes — copy the code or download the image and use it freely in personal and commercial projects.
More Design & Visual Tools
From our collection of 317 free tools.
People also use
We built this. We can build yours.
Cubic Bezier Generator & Easing Editor is one of 200+ free tools from Workaholic Developers — a software & AI studio. Need a website, app, AI agent or automation? Let’s talk.
🇮🇳 Built by Workaholic Developers
We built this little toy in days. Imagine what we’ll build for you.
AI agents, web apps, automation, custom tools — designed and engineered fast, on whatever tech fits the job. If you can describe it, we can build it.