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.
Frequently Asked Questions (FAQ)
What does it do?
It designs cubic-bezier easing curves visually and gives you the finished CSS timing function.
How do I adjust the curve?
Drag the blue dots or enter numbers. The curve updates right away.
Can I preview it?
Yes. Watch the animation in the live preview, then press Copy CSS and paste it into your stylesheet.
Are there ready-made curves?
Yes. One-click presets for ease, ease-in, ease-out, ease-in-out, linear, spring, and snap are built in.