Cubic Bezier Generator - Visual CSS Easing Curve Editor
Cubic Bezier Generator
Drag the handles to design a CSS timing function
Drag to Design
Move the two handles on the graph, or type exact values for each control point.
See It Move
A live animation runs your curve beside a linear one, so you can feel the difference.
Handy Presets
CSS keywords plus popular cubic, expo and back curves that overshoot and bounce.
Private
Everything runs in your browser; nothing you paste is uploaded.
How Easing Curves Work
A timing function maps elapsed time (the horizontal axis) to animation progress (the vertical axis). cubic-bezier(x1, y1, x2, y2) describes a curve from (0, 0) to (1, 1) bent towards two control points. The x values must stay between 0 and 1 because time cannot run backwards, but y can go below 0 or above 1, which makes an animation overshoot and settle back, as in the "back" presets.
Ease-out curves (fast start, gentle stop) feel responsive for things entering the screen; ease-in suits things leaving; ease-in-out fits elements moving from one place to another. Keep UI transitions short, typically 150-400 ms, and respect users who ask for less motion with the prefers-reduced-motion media query.
Key Takeaways
- x between 0 and 1: Time only moves forward; y may overshoot.
- Ease-out for entrances: Fast start, soft landing.
- Reduce motion: Honour prefers-reduced-motion.