Cubic Bezier Generator

Drag control points on a curve to design a custom cubic-bezier() easing function for CSS transitions and animations.

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Blue point = P1, purple point = P2

Example input

ease-in-out preset

Example output

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