Cubic Bezier Easing Generator
Generate CSS cubic-bezier timing functions with control-point validation, a curve graph and an animated preview.
Set your values
Adjust the values, then calculate your result.
How to use Cubic Bezier Easing Generator
- Set the two control points; X coordinates must stay between 0 and 1.
- Generate the timing function and inspect the curve and motion preview.
- Copy the easing into a transition or animation rule.
Control timing without changing the endpoints
The curve starts at (0,0) and ends at (1,1). X describes progress through time, while Y describes output progress. CSS constrains the X control coordinates to the unit interval. Y may overshoot, which can produce an anticipation or overshoot effect in a compatible animated property.
A graph and motion show different aspects
The graph displays the control geometry, while the ball previews the generated easing over a fixed duration. The preview reverses direction on alternating runs and pauses its animation for reduced-motion preferences. Not every property can visibly overshoot its valid range, so check the easing on the actual property you intend to animate.
Can the Y control points be outside 0–1?
Yes. This tool allows a practical range from -3 to 3. CSS requires the X controls, rather than Y controls, to remain within 0–1.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.