Cubic bezier generator

Easing controls how an animation accelerates and decelerates. Linear motion looks mechanical, while well-chosen easing makes interfaces feel natural and responsive. CSS describes custom easing with cubic-bezier(x1, y1, x2, y2). This generator lets you shape the curve by dragging its control points, compare it with presets and preview the motion.

How to use it

1. Drag the two control points, or start from a preset like ease-out.
2. Watch the preview to judge the feel.
3. Copy the cubic-bezier() value into transition-timing-function or animation-timing-function.

How the curve works

The curve starts at (0, 0) and ends at (1, 1). The x-axis is time and the y-axis is progress. The two control points shape the curve between them. A steep section means fast movement, a flat section means slow movement. x values must stay between 0 and 1, but y values can go outside that range to create overshoot or anticipation.

Built-in keywords and their curves

• ease = cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in = cubic-bezier(0.42, 0, 1, 1)
• ease-out = cubic-bezier(0, 0, 0.58, 1)
• ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

Practical guidance

• Elements entering the screen: ease-out, so they arrive quickly and settle gently, for example cubic-bezier(0.16, 1, 0.3, 1).
• Elements leaving: ease-in.
• Playful overshoot: cubic-bezier(0.34, 1.56, 0.64, 1) goes slightly past the target and back.
• Keep UI transitions short, around 150 to 300 ms, and respect prefers-reduced-motion.