Cubic Bezier Easing Generator

What this tool does

Every CSS transition or animation has a timing function — the part that decides whether motion starts slow and speeds up, overshoots and settles back, or moves at a constant rate. The built-in keywords (ease, ease-in-out, and so on) are really just cubic-bezier() curves with fixed numbers. This tool lets you drag your own curve instead of guessing at values, see a ball animate across a track with the exact timing you built, and copy the finished CSS.

How to use it

• Drag the blue handle (controls the start of the motion) and the coral handle (controls the end) to reshape the curve.
• Or type exact x1/y1/x2/y2 values directly if you already know the numbers you want.
• Click Play Preview to watch a ball animate across the track using your exact curve, and adjust the duration slider to match your real animation's speed.
• Try a named preset — standard keywords like ease-in-out, plus overshoot curves like ease-out-back and steep curves like ease-in-expo — as a starting point, then fine-tune from there.
• Copy the ready transition-timing-function / animation-timing-function CSS from the output box.

Real-world use cases

• Giving a modal or dropdown a slight "overshoot" bounce on entry using an ease-out-back style curve.
• Matching a custom easing curve from a Lottie animation or a design tool's motion spec.
• Speeding up the start of a hover transition so it feels more responsive, without touching the total duration.
• Building a signature, on-brand motion feel instead of relying on the same handful of default easing keywords every site uses.

Frequently asked questions

What do x1, y1, x2, y2 actually control?

They're the two control points of a cubic Bezier curve plotted between a fixed start (0,0) and end (1,1). The x values must stay between 0 and 1 (time can't run backward), but y can go below 0 or above 1, which is what creates "overshoot" effects like a curve that dips back before settling forward.

Why does my curve overshoot past the end point?

That happens when a control point's y value goes above 1 or below 0 — it's not a bug, it's what powers effects like ease-out-back, where an element slightly overshoots its target position before settling, similar to a spring.

What's the difference between transition-timing-function and animation-timing-function?

Both accept the exact same cubic-bezier() value. transition-timing-function applies to CSS transitions (state changes like hover or focus); animation-timing-function applies to @keyframes animations. The output box gives you both so you can use whichever your CSS actually needs.

Can cubic-bezier() create a bounce like a ball dropping?

Not a true multi-bounce effect — a single cubic-bezier() curve can only overshoot once. A realistic multi-bounce needs multiple keyframe steps. But single-overshoot curves like the back and elastic-style presets here cover the vast majority of real UI "bounce" use cases.