Cubic Bezier Generator
Design a cubic-bezier easing curve and see it play in a live animated preview.
How to use Cubic Bezier Generator
- Pick a preset — ease, ease-in, ease-out, ease-in-out, linear or back — or drag the curve's two control points yourself.
- Watch the live preview play the easing curve.
- Copy the generated cubic-bezier() value for your CSS transition or animation.
Frequently asked questions
Why are x1 and x2 limited to 0-1 but y1 and y2 aren't?
The CSS spec requires the x values (which represent time) to stay within 0-1 since time can't run backward or skip ahead — but y values (which represent progress) can go outside that range, which is exactly what produces bounce or overshoot effects like the "back" preset.
What do the two straight orange lines in the graph represent?
They're the control-point handles — from the curve's start to the first control point, and from its end to the second — the same visual convention most bezier-curve editors use to show how each point is pulling the curve.
Can I use the generated value directly in CSS?
Yes — paste it as the value for `animation-timing-function` or `transition-timing-function` in any CSS animation or transition.
Community
Loading...