Cubic Bezier Generator
Preview an easing curve and generate its CSS timing function.
Processing stays in your browser. X coordinates must be between 0 and 1. Y coordinates can extend outside that range for overshoot.
How to use the cubic bezier generator
Preview an easing curve and generate its CSS timing function. Complete the first control x (0–1), first control y, second control x (0–1), second control y fields above. Choose Run tool, review the output and visual preview where available, then copy or download the result.
Example
0.25, 0.1, 0.25, 1 produces the standard ease curve.
Good to know
X coordinates must be between 0 and 1. Y coordinates can extend outside that range for overshoot.