Cubic Bezier Easing Generator — Visual CSS Animation Curves

In short: the Cubic Bezier Generator lets you sculpt CSS easing curves — the acceleration feel of every transition and animation — with four handles, famous presets, the curve drawn, and a ball that replays your exact easing.

ease, ease-in and ease-out are just three points in an infinite space of motion feels. This tool opens the whole space: drag the curve until the ball moves the way your interface should feel.

Preview ball — change any value to replay with your easing.

Handle 1 — x (0–100)

Handle 1 — y (−60–160)

Handle 2 — x (0–100)

Handle 2 — y (−60–160)

Generated CSS / values — copy and paste into your project

Private by design: everything in this tool happens 100% in your browser with JavaScript. Your data, photos and designs are never uploaded to a server, never stored and never seen by us - close the tab and everything is gone.

How to use the Cubic Bezier Generator

Start from a preset to learn the landmarks (ease, back, bounce-out).
Adjust handles: handle 1 shapes the start of the motion, handle 2 the end. Y values beyond 0–1 create overshoot (anticipation and bounce).
Copy the cubic-bezier() value into your transition or animation.

How it works

A CSS cubic-bezier is a parametric curve from (0,0) to (1,1) with two control points. Browsers solve it exactly as this page does: for a given time x, find the curve parameter whose x matches (binary search here), then read its y as progress. Overshoot comes from control-point y values outside [0,1].

Worked example

A menu that "pops" pleasingly instead of sliding dully: the back preset’s overshoot, borrowed here, becomes the app’s signature motion.

Frequently Asked Questions

What do the four numbers mean?

Two control points: (x1, y1, x2, y2). x is time (must stay 0–1); y is progress (free to overshoot).

Why does the ball go backwards with "back"?

A negative y1 makes progress dip below zero first — the wind-up before the throw. That anticipation is what feels alive.

Easing for UI — a good default?

ease-out curves (fast start, gentle landing) suit most interface motion; ease-in suits elements leaving the screen.

Is my curve valid CSS?

Yes — any x in [0,1] works; the generator’s sliders enforce exactly that.

More Colour & CSS Generators

Shades & Tints Colour Harmony Colour Converter CSS Gradient Box Shadow Glassmorphism CSS Button Spinner

The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).