Cubic Bezier Generator: CSS Easing & Transitions

How to use

1. Start from a preset such as ease-out or “back” and adjust the four values or drag the two handles.
2. Choose the property, duration and delay, then press Play to compare the motion with linear timing.
3. Copy the transition shorthand or the full @keyframes animation.

What this tool does

A cubic-bezier(x1, y1, x2, y2) timing function maps time to progress with two control points. x values must stay between 0 and 1; y values may go outside that range to create anticipation and overshoot. The generator validates the values and writes standards-compliant CSS.

Why it matters

Good easing makes interfaces feel responsive and natural: elements entering the screen usually ease out, elements leaving ease in. Linear motion tends to feel mechanical.

Common uses

• Hover and focus transitions on buttons and cards.
• Entrance animations for menus and modals.

Tips

• Keep UI transitions short: about 150–300 ms for small elements.
• Always respect prefers-reduced-motion; the generated animation code includes it.

Limitations

Multi-step easing such as the CSS linear() function and spring physics are not generated.