Cubic-Bezier Generator: CSS Easing Curves

A cubic-bezier generator draws a CSS easing curve you can shape by hand. Drag the two handles, watch a box move on your curve next to one on ease or ease-in-out, and copy the cubic-bezier() value for your transition or animation.

cubic-bezier(0.34, 1.56, 0.64, 1)

How to use it

1. Drag the handles. The pink handle shapes the start of the movement and the blue one the end. Tap anywhere on the graph and the nearer handle jumps there. On a keyboard, focus a handle and use the arrow keys; hold Shift for bigger steps.
2. Watch the preview. The yellow box runs on your curve and the white one on the keyword picked under Compare with, which is also drawn dashed on the graph. Change the Duration to see it at the speed you will use it. If your device asks for reduced motion, the preview waits for Play once.
3. Start from a preset. The list holds the five CSS keywords and the classic easing functions: Sine, Cubic, Quint, Expo, Circ and Back, each as in, out and in-out.
4. Paste one in. Type or paste a cubic-bezier(…) from your stylesheet, a keyword like ease-in, or a preset name like easeOutBack, and the graph loads it.
5. Copy it. The value under the controls is ready to paste into a transition or animation.

Everything runs in your browser. Nothing you make is uploaded.

How cubic-bezier works

.button {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
 
/* Or on its own: */
.panel {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

The curve always starts at (0, 0) and ends at (1, 1). The four numbers are the two points in between that pull it into shape:

• x is time, from the start of the transition to the end. Both x values must be between 0 and 1, or the browser ignores the whole declaration.
• y is progress, how far along the change is. y can go below 0 or above 1, which makes the element pull back before it starts or overshoot and settle.
• Steep means fast, flat means slow. A curve that climbs quickly at the start and flattens out (ease-out) moves fast and then glides to a stop.

The five keywords are all cubic-bezier curves with names:

Which easing to use

• Things entering the screen: ease-out. A menu or toast that arrives fast and settles feels responsive. easeOutCubic or easeOutQuint are good starting points.
• Things leaving: ease-in. Something that accelerates away feels like it is going somewhere, and it is out of the way quickly.
• Things moving across the screen: ease-in-out. An element that travels from one place to another should start and stop gently.
• A bit of character: back. easeOutBack overshoots and settles, which suits buttons and small pop-ins. Use it sparingly on large elements.
• Keep it short. Most interface transitions sit between 150ms and 400ms. The easing matters less than a duration that does not make people wait.

Gotchas

• An x outside 0 to 1 silently does nothing. The browser drops the whole declaration, so the transition falls back to ease. This tool will not load one, and says why.
• Overshoot can escape its box. A curve with y above 1 moves the element past its end value. On a width or a transform that is fine; on opacity the value is clamped, so the overshoot is invisible.
• One curve, one bounce at most. A cubic-bezier can only turn so many times. For a proper bounce or spring, use linear() with stops or @keyframes.
• Respect reduced motion. Some people get dizzy from movement. Wrap large or long animations in @media (prefers-reduced-motion: no-preference), as this page's preview does.
• The timing function applies per keyframe. In an @keyframes animation the easing runs between each pair of keyframes, not once across the whole animation.

Keep going

The CSS cheat sheet covers transition, animation and @keyframes around this value. Pair an easing with the Box Shadow Generator for a lifted hover state, or animate a background from the CSS Gradient Generator. The Glassmorphism Generator and the Color Converter finish the set. More free tools that run in your browser are on the tools page.

Common questions