CSS
🎬 Animations
CSS Cubic Bezier Generator
Cubic bezier curves define CSS animation easing functions. This generator lets you visually design custom timing curves by adjusting two control points, with a live animation preview.
Controls
67
0
33
100
10
Live Preview
Generated CSS
Adjust parameters above to generate CSS...
How to Use
- Adjust X1, Y1, X2, Y2 sliders to shape your easing curve.
- The animation preview shows how the curve affects movement timing.
- Common presets: ease-out (slow start), ease-in (slow end), bounce, elastic.
- Copy the generated cubic-bezier() value into your CSS animations.
How It Works
A cubic bezier curve is defined as
cubic-bezier(x1, y1, x2, y2) where each value ranges from 0 to 1. The first pair (x1,y1) controls the start slope, the second pair (x2,y2) controls the end slope. X values >1 or <0 create overshooting (bounce-like) effects.