Cubic-bezier generator.

They are the two control points of a Bézier curve whose ends are pinned at (0, 0) and (1, 1): x1 and y1 for the first, x2 and y2 for the second. x is the share of the time that has passed and must stay between 0 and 1; y is the share of the change that's done and may go past either end. The browser solves the curve for every frame.

Ease-out, fast then slow, for anything that enters or answers a tap: it moves at once, so it feels quick, and settles gently. Ease-in for things that leave, which speed up out of view. Ease-in-out for something moving from one place on screen to another. Linear only for motion that never stops, such as a spinner or a progress bar.

Most interface transitions sit between 150 and 400 ms: a toggle or a tooltip near 150 ms, a panel or a dialog around 250 to 300, a large move across the screen up to 500. Longer than that and people wait on the interface instead of using it. An exit can be a little shorter than the entrance it undoes.

A y past 1 carries the motion beyond its end before it settles back (overshoot, as in ease-out-back); a y below 0 pulls it back before it sets off (anticipation, as in ease-in-back). x can't leave 0 to 1, because time can't run backwards: browsers ignore a cubic-bezier() whose x is outside that range.

They are different curves with one name. CSS's ease-out keyword is cubic-bezier(0, 0, 0.58, 1). Tailwind v4's ease-out class reads its theme's --ease-out, cubic-bezier(0, 0, 0.2, 1), which slows down sooner and harder. Both are in the curve menu, so you can play one after the other.

The Tailwind tab gives an arbitrary class such as ease-[cubic-bezier(0.34,1.56,0.64,1)] with its duration-* class. The @theme tab adds the curve to your theme instead: --ease-out-back inside @theme makes an ease-out-back class you can use anywhere. A curve Tailwind already has is written as its own class.

Yes. Tab to a handle and move it with the arrow keys, by 0.01 or by 0.1 with Shift, or type the four values in the fields under the plot. Reverse mirrors the curve, which turns an ease-in into the matching ease-out.

It plays when you pick a curve, let go of a handle or press Play. If your system asks for reduced motion it waits for Play. The marks along each lane stay put either way: they show where the box is after each tenth of the time.

No request carries your input. The Cubic-bezier generator runs in your browser: nothing you enter is sent anywhere.

No. The Cubic-bezier generator is free and opens without a sign-in, an account or an install.

Nothing. The Cubic-bezier generator holds your input in the page's memory, so closing or reloading the tab clears it, and it saves nothing in this browser.

Closest to the Cubic-bezier generator: Color converter. Each opens on its own page, free and in the browser.

The Cubic-bezier generator is one of 10 in its group. The group's page, /tools/css, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.