Updated: 2026-07-11
Curve Editor
0.25
0.10
0.25
1.00
ease
ease-in
ease-out
ease-in-out
elastic
bounce
back-in
overshoot
cubic-bezier(0.25, 0.10, 0.25, 1.00)
0%50%100%
π‘ About Cubic-Bezier Curves
Cubic-bezier is a CSS easing function defined by two control points (P1, P2) that describe how animation speed changes over time. The x-axis represents time, y-axis represents animation progress.
Parameters
cubic-bezier(x1, y1, x2, y2)
β’ x1, x2: Control point horizontal position (0~1)
β’ y1, y2: Control point vertical position (can exceed 0~1 for elastic effects)
How to Use the Bezier Curve Generator
Create the perfect easing curve in three simple steps:
-
Select a Preset or Drag the Control Points
Choose a preset like ease-in-out, or drag the P1/P2 control points on the canvas to shape your curve. Fine-tune with the x1/y1/x2/y2 sliders for precise values. -
Preview the Animation
Click "Preview" to see how the curve behaves as a CSS animation. Values outside 0-1 create bounce, elastic, and overshoot effects. -
Copy the CSS
Click "Copy CSS" to grab the cubic-bezier() value and paste it straight into your transition or animation property.
β FAQ
Can y values exceed 1 or be negative?
Yes! Values outside 0~1 create bounce, elastic, or overshoot effects for dynamic animations.
How to use in CSS?
Copy the cubic-bezier() value and use it in your animation or transition: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);