CSS Easing Generator
The easing curve decides whether motion feels mechanical or natural. Drag the handles to shape your cubic-bezier curve, watch the animation preview, and copy the finished CSS for transitions and keyframes.
Drag the blue dots to change the curve
Presets
Live preview (the box moves with this curve)
How to use
- Drag the blue dots or enter numbers — the curve updates right away.
- Watch the animation in the live preview below.
- Press "Copy CSS" and paste into your stylesheet.
Notes
- If you set y1 / y2 outside 0-1 you get a spring / overshoot effect (like the "spring" preset).
- x values always stay between 0 and 1 — this is a CSS requirement.