Cubic Bezier Editor
CSS Cubic Bezier Timing Function Tool
Drag the control points to design a custom easing curve and copy the code.
About Cubic Bezier Timing Functions
The CSS cubic-bezier() function defines a custom timing function for transitions and animations. It takes four numbers that represent the X and Y coordinates of two control points, P1 and P2, of a Bezier curve. The curve describes how a property accelerates and decelerates over the duration of the animation.
The X values of the control points must stay between 0 and 1, while the Y values can go outside that range to create bouncy or overshooting effects. Built-in keywords like ease, ease-in, ease-out, and ease-in-out are simply named shortcuts for specific cubic-bezier curves.
