CSS Cubic-Bezier Generator

The CSS Cubic-Bezier Generator is a visual tool for creating custom transition-timing-function curves. These curves control the acceleration and deceleration of CSS transitions and animations.

Understanding the Curve

The curve is defined by four points: P0 (0,0), P1, P2, and P3 (1,1). You control P1 (pink) and P2 (green).

Horizontal Axis (X): Represents time, from 0 to 1 (start to end).
Vertical Axis (Y): Represents progression, from 0 to 1 (0% to 100%).

Common Uses

Ease-in: Starts slow, speeds up. Good for exits.
Ease-out: Starts fast, slows down. Good for entrances.
Ease-in-out: Slow start and end. Natural for movement.
Bouncing: By pulling the control points outside the 0-1 vertical range, you can create bouncing or elastic effects.

The CSS Cubic-Bezier Generator is a visual tool for creating custom transition-timing-function curves. These curves control the acceleration and deceleration of CSS transitions and animations.

Understanding the Curve

The curve is defined by four points: P0 (0,0), P1, P2, and P3 (1,1). You control P1 (pink) and P2 (green).

Horizontal Axis (X): Represents time, from 0 to 1 (start to end).
Vertical Axis (Y): Represents progression, from 0 to 1 (0% to 100%).

Common Uses

Ease-in: Starts slow, speeds up. Good for exits.
Ease-out: Starts fast, slows down. Good for entrances.
Ease-in-out: Slow start and end. Natural for movement.
Bouncing: By pulling the control points outside the 0-1 vertical range, you can create bouncing or elastic effects.