CSS Cubic Bezier Generator
Create custom CSS cubic-bezier() easing functions with a visual curve editor and animation preview
Presets
Curve Editor
Drag the blue circles to adjust the control points
Control Points
x1 and x2 must be between 0 and 1. y1 and y2 can exceed this range for overshoot effects.
CSS Output
cubic-bezier(0.25, 0.1, 0.25, 1)Animation Preview
Click Replay to see the animation with the current easing
Frequently asked questions
What does CSS Cubic Bezier Generator do?
Create custom CSS cubic-bezier() easing functions with a visual curve editor and animation preview
What should I check in the result?
Preview the result with your actual content and at different screen sizes. Check readability and compatibility in the browsers you support.