Cubic-Bezier Generator

Easing that feels right

The difference between a cheap-feeling animation and a polished one is usually the easing. A cubic-bezier curve lets you control exactly how motion accelerates and decelerates. This editor makes that tangible: drag the handles, watch the dot, and tune until the motion feels natural.

How to use it

1. Start from a preset like ease-out, then refine it.
2. Drag the handles to steepen or soften the curve. Pull a handle past the top for a bounce.
3. Replay the preview to feel the timing in motion.
4. Copy the value into your transition or animation.

Frequently asked questions

What is a cubic-bezier easing function?

It's the curve CSS uses to control how an animation speeds up and slows down. Two control points define the shape between start and end. Standard keywords like ease and ease-in-out are just named cubic-bezier curves.

How do I shape the curve?

Drag the two round handles. Pulling them changes how the animation accelerates. The preview dot replays with your curve so you can feel the timing, not just see numbers.

Can the curve go above the top or below the bottom?

Yes. The vertical axis can overshoot past 0 and 1, which creates bounce and anticipation effects. The horizontal axis is locked to 0–1 because that represents time, as the CSS spec requires.

How do I use the result?

Copy the cubic-bezier() value and drop it into a CSS transition or animation's timing function, e.g. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

Is anything sent to a server?

No. The editor runs entirely in your browser. Nothing is uploaded or stored.