CSS Cubic Bezier Generator
Create custom cubic-bezier easing functions visually for CSS animations and transitions
Presets
Curve Editor
CSS Output
cubic-bezier(0.250, 0.100, 0.250, 1.000)
Transition shorthand
transition: all 0.4s cubic-bezier(0.250, 0.100, 0.250, 1.000);
Animation Preview
x10.250
y10.100
x20.250
y21.000
Frequently asked questions
What does CSS Cubic Bezier Generator do?
Create custom cubic-bezier easing functions visually for CSS animations and transitions
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.