How to Create a Custom cubic-bezier() Easing Curve for CSS

A custom easing curve is four numbers, but you choose them by eye and by feel, not by arithmetic. Cubic-bezier easing generator gives you the curve to drag, the motion to watch, and the CSS to copy. Here is the process from a blank start to a value in your stylesheet, including the parts the tool page does not spell out.

Step 1 - start from the nearest preset

The tool opens on this site's own easing, cubic-bezier(0.16, 1, 0.3, 1), read live from the stylesheet and labelled "This site's ease". It is a strong ease-out and a reasonable starting point for most entrance motion. If you want something else, the Preset menu has seven curves, each drawn as a small thumbnail: the five CSS keywords (ease, ease in, ease out, ease in out, linear) and two that overshoot, ease out back and ease in out back. "Start fresh" sets the curve to the plain ease values and remembers that choice for your next visit.

"Random curve", in the More menu, picks one of the presets at random and never the one already showing, so each press visibly changes the curve.

Step 2 - drag the handles, then fine-tune

Drag the two handles on the chart. The first handle shapes the start of the motion, the second shapes the end. For small adjustments, focus a handle and use the arrow keys: each press moves it 0.01, and Shift moves it 0.1. The four number fields accept typed values too, and the output is always rounded to two decimals.

The horizontal position of each handle is held between 0 and 1. The vertical position can go from -1 to 2, so you can drag a handle above or below the box to make the motion overshoot or pull back. The chart draws the range from -0.6 to 1.6; a value beyond that is still valid and still used, it just sits outside the drawn area.

Step 3 - judge it at the duration you will really use

A curve that looks right at one duration can feel wrong at another, so set the duration first. Open the timing section, set the slider anywhere from 100 to 3000 ms in steps of 50 (it starts at 400), and press "Replay animation". The comparison strip runs three dots over the same distance for the same time: your curve, the browser's own linear, and the browser's own ease. Both comparison rows are the browser's real keywords, and your row is a real CSS transition using your exact value, so what you see is what your page will do.

If your system is set to reduce motion, the dots are shown where they finish instead of moving on their own. Pressing Replay animation still plays them, since that press is an explicit request to see the motion.

Step 4 - read the plain-words line, then copy

"In plain words" describes the curve you have made, computed from the curve itself: whether it starts fast, slow, or at an even pace, how it ends, and whether it goes past the end and settles back or pulls back before it sets off. It is a quick check that the curve does what you meant, especially after a lot of fine dragging.

Copy CSS gives you two lines: the cubic-bezier() value on its own, and a ready line such as transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); using your duration. The second line assumes you are animating transform; if you are animating something else, change the property name and keep the rest.

For why the curve matters more than the duration, see the background. For a full overshoot animation, and the two bugs it tends to cause, see the ease-out-back guide. Or open the generator.