Curve
Adjust the bezier points
Adjust the sliders and run the preview.
Live tool
Easing Curve Generator
Adjust cubic-bezier points, preview the timing, and copy the resulting CSS easing code for your UI motion system.
Output
Cubic bezier result
cubic-bezier(0.20, 0.90, 0.20, 1.00)
Tool guide
How to tune easing for UI motion
Use the easing curve generator when a transition feels too sharp, too slow, or disconnected from the rest of a product interface. Good easing makes motion feel intentional without drawing attention away from the task.
- Choose or enter a cubic-bezier curve.
- Preview the motion at the duration used in the real interface.
- Compare the curve with nearby UI transitions so the product feels consistent.
- Copy the CSS value into the component or design token where the motion belongs.
A good curve cannot fix a transition that is too long, too frequent, or attached to the wrong product event. Review timing, distance, and reduced-motion behavior as part of the same decision.
For product teams, easing values usually belong in design tokens or shared CSS variables.
No. Use a small set of consistent curves for entrances, exits, emphasis, and state feedback.