About CSS Cubic Bezier Generator
A cubic Bezier easing curve describes how an animated value progresses over time. The curve runs from (0, 0) to (1, 1) and is shaped by two control points, P1 (x1, y1) and P2 (x2, y2). The x values must stay between 0 and 1, while y may go below 0 or above 1 to create overshoot. The default here, 0.25, 0.1, 0.25, 1, equals the CSS keyword ease.
How to use CSS Cubic Bezier Generator
- Fill in "x1", "y1", "x2" and "y2", and the other options.
- The result appears below and updates as you type.
- Copy the result with the copy button, or download it as a file where that is offered.
Questions about CSS Cubic Bezier Generator
Which cubic-bezier values match the CSS keywords?
ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), ease-in-out is (0.42, 0, 0.58, 1), and linear is (0, 0, 1, 1).
Runs in your browser. Page last updated .