Cubic Bezier Generator

Cubic-bezier easing generator

This tool crafts custom CSS easing curves and gives you the exact cubic-bezier() value for your transitions and keyframe animations. It is for developers who want motion that feels right — snappy, smooth or springy — rather than the handful of built-in keywords. Drag the curve, preview a moving dot, and copy the timing function.

How it works

A CSS easing curve is a cubic Bézier defined by four numbers: cubic-bezier(x1, y1, x2, y2). The curve always begins at the fixed point (0, 0) and ends at (1, 1); the two control points P1 = (x1, y1) and P2 = (x2, y2) bend the path between them. The x axis is time (progress from 0 to 1) and the y axis is the animated value. Because time only moves forward, the tool clamps x to 0–1, but it lets y go below 0 or above 1 so you can build overshoot and anticipation. Values are rounded to two decimals, and the preview animates a dot using your exact curve.

Reading the curve shape

The shape of the curve tells you how the animation accelerates:

• Steep start, shallow end — the element moves fast initially then slows to a stop. This is ease-out character. It feels natural for elements entering the screen, because real objects decelerate as they settle.
• Shallow start, steep end — slow start, fast finish. This is ease-in character. It feels natural for elements leaving the screen — objects accelerate as they move away.
• S-curve (shallow → steep → shallow) — slow start, fast middle, slow end. This is ease-in-out. Use it for elements that move across the screen and should feel weighted at both ends.
• Y overshoot above 1 — the animated value briefly exceeds its target before settling. This produces a spring or elastic feel — the element overshoots and bounces back. The amount of overshoot depends on how far y1 or y2 goes above 1.
• Y dip below 0 — the element briefly moves in the opposite direction before heading to its target. This is the “back-in” anticipation effect, like a character winding up before a jump.

Presets and their values

The CSS specification defines five named easing keywords, each mapping to a cubic-bezier:

Beyond the built-ins, a few community presets are widely used:

Example

Dragging the handles to the back-out preset gives control points (0.34, 1.56) and (0.64, 1):

transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

The y value of 1.56 overshoots past the end, so the element shoots slightly past its target and settles back — a gentle spring. Apply this to a modal sliding in from the bottom and it feels satisfyingly physical.

Where to use the value

The copied value works in any CSS property that accepts a timing function:

/* transition */
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* animation-timing-function */
.bounce { animation: slide 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* individual step in a keyframe */
@keyframes slide {
  0%   { transform: translateY(20px); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  100% { transform: translateY(0); }
}

Applying the timing function at a specific keyframe step is useful when you want overshoot only on one leg of a multi-step animation.

Everything runs locally in your browser — nothing is uploaded.