Cubic-Bezier Easing Editor — tune CSS animation curves online
The easing editor lets you drag two control points to draw a CSS cubic-bezier() easing curve, plays a ball animation in real time so you feel the actual motion, and copies a timing-function you can drop straight into transition / animation. Design Cat is pure front-end — the curve is computed right in your browser.
Cubic-Bezier Easing Editor is a free online tool from Design Cat that runs entirely in your browser — open it, do it, and download the result. Nothing is uploaded, there's no sign-up and no limits.
Drag the two control points to shape the curve
cubic-bezier(0.34, 1.56, 0.64, 1)
Pure front-end, live demo — copy and paste.
What are you actually tuning with a cubic-bezier curve?
In CSS animation, the timing-function decides the rhythm of speed across the same distance and duration. linear is constant speed and looks mechanical; real objects accelerate and decelerate, which is why eased curves like ease and ease-out feel natural. cubic-bezier(x1, y1, x2, y2) defines that rhythm with two control points: the horizontal axis is time (0→1) and the vertical axis is progress (0→1). The first point (x1,y1) controls the start, the second (x2,y2) controls the finish — flatten the start for a slow ramp-up (ease-in), flatten the end for a gentle settle (ease-out). Design Cat lets you drag those two points directly, so you never have to convert numbers in your head.
An often-overlooked power: the vertical y value is allowed to go outside 0–1, so the curve can overshoot and spring back — exactly the feel many polished micro-interactions rely on (a button bounce, a card popping in) that the plain ease presets can't produce. In Design Cat the control points can be dragged past the top and bottom of the panel, the curve bulges or hooks accordingly, and the ball on the right genuinely shoots past the end and springs back, so you confirm the feel before copying. For more dramatic spring physics, CSS's multi-segment linear() or a JS animation library fits better, but for everyday UI transitions a well-tuned cubic-bezier is plenty.
A few things to remember when shipping: match duration to the curve — slow-in-slow-out curves feel best at 200–400ms, too short hides the rhythm and too long drags; reuse one curve for the same kind of motion across an interface (store it as a CSS variable like --ease) so the rhythm stays consistent and professional; and use different curves for enter and exit — elements often enter with ease-out (fast in, gentle stop, feels lively) and leave with ease-in (slow start, quick out, crisp). Design Cat outputs a standard cubic-bezier() value to paste into your transition or animation timing-function, all in your browser, nothing uploaded, no sign-up.
How to use cubic-bezier easing editor
- 1Drag the two round control points on the curve panel to shape the acceleration you want.
- 2Or start from a preset below (ease, ease-in-out, a back / overshoot curve…) and fine-tune.
- 3Watch the ball travel back and forth along your curve to feel the real motion.
- 4Hit Copy to grab the cubic-bezier(...) value and paste it into your transition or animation timing-function.
Why use Design Cat's Cubic-Bezier Easing Editor?
- Drag-to-shape: pull control points directly on the curve — far more intuitive than guessing four numbers.
- Live motion preview: a ball moves along the curve in sync, so you feel the easing at a glance, no refreshing.
- Local and copy-ready: the curve is computed in your browser and outputs a standard cubic-bezier() value that just works on paste.
Frequently asked questions
What do the four numbers in cubic-bezier mean?
They're the coordinates of the two control points (x1, y1, x2, y2): the horizontal axis is time, the vertical axis is animation progress. x must stay between 0 and 1, while y can go outside 0–1 to create overshoot. Design Cat lets you drag the points and computes the four values for you.
How do I get a bounce / overshoot effect?
Drag a control point above the top edge or below the bottom edge of the panel so the curve passes beyond the 0–1 progress range, and the animation will shoot past the end and spring back. The ball on the right demonstrates this bounce live.
How do I use the copied value?
Drop the whole cubic-bezier(...) into a transition or animation timing-function, e.g. transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); and you're done.
How is this different from just using ease or ease-in-out?
Keywords like ease are simply a few preset cubic-bezier curves — convenient but not adjustable. When the default feel is off — you want it more responsive, want a bounce, want enter and exit to differ — you need a custom curve. Design Cat lets you start from a preset, drag to fine-tune, confirm the feel visually, then copy — much faster than guessing numbers.
Updated · design cat team