What is CSS Cubic-Bezier Generator?
cubic-bezier() is the CSS function that defines an animation timing curve via two control points (x1, y1, x2, y2) — it decides whether your animation accelerates, decelerates, or bounces. This generator makes those abstract parameters tangible: drag the P1 and P2 handles on an SVG canvas and watch the curve and values update live; choose from 8 presets including linear, ease, ease-in, ease-out, and ease-in-out; preview the animation with a moving block and adjustable duration; then copy the complete transition/animation CSS with one click. Pure frontend, ready to use.
▶Use Cases5 scenarios
- ◆Designing web animation easing
- ◆Building UI interactions
- ◆Learning how bezier curves work
- ◆Creating button/modal transitions
- ◆Generating reusable animation code
▶How to Use4 steps
- 1Drag the P1 and P2 control points to shape the curve
- 2Or click a preset like ease-in-out
- 3Adjust duration and hit Play to preview
- 4Copy the generated cubic-bezier CSS code
▶Features8 features
- ✓Free
- ✓No signup
- ✓Visual drag control points
- ✓8 built-in presets
- ✓Live animation preview
- ✓Duration control
- ✓One-click CSS copy
- ✓Responsive design
▶FAQ4 questions
What is cubic-bezier?
cubic-bezier() is the CSS timing function that defines how an animation accelerates over time using two control points (x1, y1, x2, y2).
Can control points be negative?
Yes. Setting the y values below 0 or above 1 creates bounce and overshoot effects.
How do I use it in my project?
Copy the generated CSS — e.g. transition: all 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) — and paste it into your stylesheet.
Which presets are available?
linear, ease, ease-in, ease-out, ease-in-out, bounce-ish, snap, and smooth — 8 presets in total.