CSS Cubic Bezier Generator

cubic-bezier() is a CSS timing function that defines the speed curve of an animation or transition. It takes four parameters (x1, y1, x2, y2) that represent two control points of a bezier curve, determining how the animation accelerates and decelerates.

Drag the two control point handles (P1 and P2) on the canvas to shape your curve. The animation preview box on the right updates in real time so you can see exactly how the easing feels.

CSS provides several built-in keywords: ease (default, starts fast then slows), linear (constant speed), ease-in (starts slow), ease-out (ends slow), and ease-in-out (slow at both ends). This tool includes all of these as presets.

Yes! All processing happens entirely in your browser. No data is sent to any server. No data is collected, stored, or transmitted.

The x-values of control points must stay between 0 and 1, but y-values can go beyond this range. Values outside 0-1 on the y-axis create overshoot effects where the animation goes past its end state before settling.