Free Cubic Bezier Generator

Drag a curve to build CSS easing functions.

Runs locallyNo uploadPrivate

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

Preview

Drag the blue and pink control points to shape your easing curve, or start from a preset. Copy the cubic-bezier() value straight into your CSS transition or animation. Points can go past the top or bottom for a bounce/overshoot effect.

Loading tool…

About the Cubic Bezier Generator

Free cubic-bezier() generator. Drag the control points to shape a custom CSS easing curve, preview the motion live, and copy the timing function for your transitions and animations.

How it works

1
Drag the points
Shape the curve, or start from a preset.
2
Preview it
Watch the motion replay live.
3
Copy the CSS
Paste the cubic-bezier() value in.

Frequently asked questions

It's a custom easing function for transitions and animations, defined by two control points. It lets you fine-tune acceleration beyond ease, ease-in and ease-out.

Yes — drag a control point above the top or below the bottom of the box so the curve overshoots, which creates a bounce or anticipation effect.