Bezier Curve Generator
Drag two control points to adjust cubic-bezier curve, preview animation easing, and copy CSS code.
Curve Editor
Drag the blue control points to adjust the Bézier curve
Presets
Animation Preview
Output
About This Tool
A free online cubic-bezier curve generator for front-end developers. The CSS cubic-bezier() function defines animation easing, used in transition-timing-function and animation-timing-function. Drag the two control points to adjust the curve; the preview shows a block moving along the track with the current easing applied.
How to Use
1. Drag the control points in the curve editor; 2. Click "Play Animation" to see the block's motion; 3. Click "Copy Code" to copy the cubic-bezier value for use in your CSS.