What is the CSS Cubic Bezier Generator?
Design custom CSS easing curves with a visual control point editor. Preview how your curve moves an element and copy the cubic-bezier() value.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Cubic Bezier Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Drag the control points
Move the two Bezier handles to shape the curve. Left handle controls acceleration at the start. Right handle controls deceleration at the end.
Preview the motion
Click the Play button to see a ball or element move along your curve. Compare with built-in easings side by side.
Copy the cubic-bezier() value
Click Copy to grab cubic-bezier(x1, y1, x2, y2) ready to use in transition or animation-timing-function.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Named easings */
.ease { transition: transform 300ms ease; }
.ease-in { transition: transform 300ms ease-in; }
.ease-out { transition: transform 300ms ease-out; }
.ease-in-out { transition: transform 300ms ease-in-out; }
.linear { transition: transform 300ms linear; }
/* Custom spring-like easing */
.spring {
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Custom deceleration */
.decelerate {
transition: transform 300ms cubic-bezier(0.0, 0.0, 0.2, 1.0);
}Values outside 0-1 on the Y axis produce overshoot (spring) effects. Values are always between 0-1 on the X axis.
Pro tips for better results
ease-out is the most natural for UI elements
Real objects decelerate as they stop. ease-out (fast start, slow end) matches this and feels natural for elements entering the screen.
Spring effects use Y values outside 0-1
cubic-bezier(0.34, 1.56, 0.64, 1) overshoots the target and bounces back - a spring. This is fine in CSS; only X values must stay between 0 and 1.
Material Design standard easing is cubic-bezier(0.4, 0, 0.2, 1)
This is the standard easing curve from Material Design. It decelerates into resting position and is suitable for most UI transitions.
Linear is appropriate for continuous loops
Spinning loaders, progress bars, and other continuous animations look better with linear easing. Any easing that accelerates or decelerates creates a pulsing feeling in continuous loops.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.