CSS
Cubic-Bezier Generator
Shape a CSS easing curve and preview the motion before you copy it.
Drag a handle, or focus one and use the arrow keys (hold Shift for bigger steps).
cubic-bezier(0.25, 0.1, 0.25, 1)The dot moves on your exact easing — the shape of the curve is the shape of the motion.
How it works
A CSS easing curve is a cubic Bézier: the animation runs from (0,0) to (1,1), and two control points bend that path so the value speeds up, slows down, or overshoots along the way. The shape of the curve is literally the shape of the motion.
Drag either handle on the graph — or type exact values, or focus a handle and use the arrow keys — and watch the dot below move on your precise timing function. Named presets like ease-out and back-out give you a starting point; the fun starts when you nudge from there.
When it feels right, copy the cubic-bezier() and paste it into your transition-timing-function. Everything runs in your browser.
Frequently asked
What do the four numbers in cubic-bezier() mean?+
They are the coordinates of two control points: cubic-bezier(x1, y1, x2, y2). The curve always runs from (0,0) to (1,1) — x is progress through time, y is progress through the animated value. The two control points bend that line into the ease you want. This tool lets you drag those points or type the numbers directly.
Can the y values go outside 0–1?+
Yes, and that is the fun part. y values above 1 or below 0 make the animation overshoot and settle back — that is how “back” and “anticipate” easings get their bounce. The x values, though, must stay between 0 and 1; CSS rejects a timing function whose control points move backwards in time, so this tool clamps x for you.
How do I use the value in my CSS?+
Copy the generated cubic-bezier() and drop it into transition-timing-function or animation-timing-function — for example: transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1). It works anywhere a CSS easing keyword like ease-out would.
Is this the same as the named easings?+
The CSS keywords are just presets: ease is cubic-bezier(0.25, 0.1, 0.25, 1), linear is (0, 0, 1, 1), and so on. They are here as starting points — pick the closest one, then nudge the handles to taste. Custom curves are where interfaces stop feeling generic.
Can I edit the curve with the keyboard?+
Yes. Focus either handle and use the arrow keys to nudge it (hold Shift for larger steps), or type exact values into the x1/y1/x2/y2 fields. The live preview updates on every change.
More free tools
All toolsCSS Selector Tester
Paste HTML, type a selector, see exactly what it matches.
Open toolCSS Grid Generator
Build a CSS grid visually and copy the code.
Open toolCSS Box-Shadow Generator
Design layered box-shadows with live sliders and copy the CSS.
Open toolMore tools shipping weekly.
Motion you can feel, feedback you can see
This tool lets you preview the exact motion before you commit. Shotline does the same for the whole page — clients drop comments straight on the live site, each pinned to the element it is about.
No signup needed. Free demo canvases stay live for 72 hours.
or start your 14-day free trial — no card required.