Cubic Bezier Generator
NEWVisually design a CSS cubic-bezier easing curve, with a live animated preview.
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.
Related tools
CSS Gradient Generator
Create beautiful CSS linear and radial gradients visually.
Box Shadow Generator
Generate CSS box-shadow values with live preview.
Border Radius Generator
Generate CSS border-radius values for any shape.
CSS Button Generator
Design and generate CSS buttons visually with live preview.