Cubic Bezier Editor

Design custom easing functions for animations

Curve Editor

Click to adjust control points

Controls

Point 1

P1 X

P1 Y

Point 2

P2 X

P2 Y

Duration

s

Preview

Linearlinear

Customcubic-bezier(0.25, 0.1, 0.25, 1)

Presets

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-duration: 1s;