Generador de curvas bezier

Genera curvas cubic-bezier para animaciones

cubic-bezier(0.34, 1.56, 0.64, 1)

Control Points: P1 (x1, y1) & P2 (x2, y2)

Point 1 (P1)(0.34, 1.56)

X1 (Time Start)0.34

Y1 (Progression Start)1.56

Point 2 (P2)(0.64, 1.00)

X2 (Time End)0.64

Y2 (Progression End)1.00

Your Custom Bezier Curvecubic-bezier(0.34, 1.56, 0.64, 1)

🚀

Linear (Constant Speed)cubic-bezier(0,0,1,1)

⏱️

Default CSS Easecubic-bezier(0.25,0.1,0.25,1)

🌿

transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

ease-[cubic-bezier(0.34, 1.56, 0.64, 1)]

Spring Overshoot (Back Out)

Spring & Elastic

cubic-bezier(0.34, 1.56, 0.64, 1)

Dynamic overshoot bounce for modern UI modals and dropdowns.

Material Design Standard

Material Motion

cubic-bezier(0.2, 0, 0, 1)

Google Material 3 recommended motion curve for entering/exiting elements.

Snappy UI Ease-Out

Spring & Elastic

cubic-bezier(0.16, 1, 0.3, 1)

Fast entry with smooth resting deceleration for buttery-smooth feel.

CSS Ease-In-Out

Standard CSS

cubic-bezier(0.42, 0, 0.58, 1)

Standard symmetric easing for looped animations and banners.