CSS Cubic Bezier Generator

This CSS cubic-bezier generator provides a visual curve editor where you can drag the P1 and P2 control points or enter exact values to generate timing functions for transitions and animations. It also includes common easing presets with curve diagrams for quick application and fine-tuning.

cubic-bezier editor

Drag P1 / P2 or edit the numbers directly.
1 0 0 1 P1 P2
Current value
{{ bezierValue }}

Preview

{{ bezierValue }}
The dot and card use the generated timing function.

Presets

Click a preset to apply it.

CSS

Copied!