CSS Cubic Bezier Generator

Create and visualize custom easing functions for CSS transitions and animations

Bezier Curve Editor

P1 X

P1 Y

P2 X

P2 Y

cubic-bezier(0.25, 0, 0.75, 1)

A cubic bezier curve is defined by four points: P0, P1, P2, and P3.

P0 and P3 are fixed at (0,0) and (1,1) respectively, representing the start and end of the transition.

P1 and P2 are the control points that define the curve’s shape.

In CSS, the syntax is: cubic-bezier(x1, y1, x2, y2)

Where (x1, y1) are the coordinates of P1 and (x2, y2) are the coordinates of P2.