CSS Cubic-Bezier Generator

Visually create and test CSS transition timing functions.

Curve Editor

Preview

Duration

Configuration

Presets

CSS Code

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

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.