Craft a CSS easing curve with a live preview and copy the cubic-bezier().
Generated locally in your browser.
What is a CSS cubic-bezier easing curve?
A cubic-bezier(x1, y1, x2, y2) curve runs from (0,0) to (1,1) with two control points; x values are clamped to 0–1 while y values may overshoot for bounce. It maps animation progress (x, time) to output (y, value), so a steeper section means faster motion. For example, cubic-bezier(0.34, 1.56, 0.64, 1) overshoots and settles back for a springy ease.
Understanding your result
The curve maps animation progress (x, time) to output (y, value). A steeper section means faster motion; a y above 1 overshoots for a bounce.
Formula and method
A cubic-bezier(x1, y1, x2, y2) curve runs from (0,0) to (1,1) with two control points. The x values are clamped to 0–1; y values may overshoot for bounce effects.
Worked example
cubic-bezier(0.34, 1.56, 0.64, 1) overshoots past the end and settles back, producing a springy “back” ease.
How to use this tool
- Pick a preset or choose Custom.
- Set the two control-point coordinates.
- Watch the moving dot, then copy the cubic-bezier().
Common mistakes to avoid
- Setting an x value outside 0–1, which is not a valid timing function.
About the CSS Cubic-Bezier Generator
Design a custom easing curve for CSS transitions and animations. Adjust the two control points or pick a preset, preview the motion live, and copy the cubic-bezier() value.
Explore all Developer Tools tools
Frequently asked questions
Where do I paste the value?
Use it in transition-timing-function or animation-timing-function, e.g. transition: all .3s cubic-bezier(…).
Can y go above 1?
Yes. Values above 1 (or below 0) make the animation overshoot, which is how bounce and elastic effects are created.