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.

Live Preview
67
0
33
100
10
Generated CSS
Adjust parameters above to generate CSS...

How to Use

  1. Adjust X1, Y1, X2, Y2 sliders to shape your easing curve.
  2. The animation preview shows how the curve affects movement timing.
  3. Common presets: ease-out (slow start), ease-in (slow end), bounce, elastic.
  4. 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.
Back to CSS Generators