Cubic Bezier Editor

Shaping motion with four numbers

A CSS cubic-bezier(x1, y1, x2, y2) describes a curve that maps elapsed time (x) to animation progress (y). Both control points start the curve pulling away from the origin and ease it toward the end. The named keywords are shorthands for specific curves: ease is cubic-bezier(0.25, 0.1, 0.25, 1) and linear is a straight diagonal. Building your own lets you dial in exactly how an element accelerates and settles.

The x axis is clamped, the y axis is not

The two x values must stay between 0 and 1, because time cannot run backward. The y values can go below 0 or above 1, and that is where the interesting effects live. A y above 1 makes the animation overshoot its target and ease back, which reads as a bouncy, playful finish. A y below 0 makes it anticipate by pulling backward first.

Example

.card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover {
  transform: translateY(-6px);
}

The 1.56 as the second control point's y value is what pushes the card slightly past its resting position before it settles, giving a subtle spring without any JavaScript.

Pitfalls

Overshoot curves look wrong on properties that should not exceed a bound, like opacity, where a value above 1 just clips and wastes the effect. Steep curves can also feel abrupt on long distances. Keep durations short (150-350ms) for UI feedback; a dramatic ease over a full second usually feels sluggish. For scaling motion across sizes, an easing paired with clamp() keeps both size and timing coherent.

FAQ

Why does my curve look linear? If both control points sit near the diagonal (for example 0.5, 0.5 twice) the curve barely bends. Pull the points apart to see acceleration.

Can I use this for keyframe animations? Yes. animation-timing-function accepts the same cubic-bezier() value, and it applies between each pair of keyframes.

What about spring physics? Bezier curves approximate springs but cannot model true oscillation. For multiple bounces you need a spring library or the newer linear() easing function.