CSS Generators·3 min read

CSS Cubic Bezier Easing: How the Curve Shapes Motion

Two animations with the same duration can feel sluggish or snappy depending only on their easing. In CSS that easing is usually a cubic-bezier() curve: four numbers that decide where the motion speeds up and where it slows down. This guide explains what those numbers are, how to read the curve, which shapes suit common interface motion, how overshoot works, and how the Cubic Bezier Generator lets you drag the curve and watch the result next to a reference.

Open the free Cubic Bezier Generator All insights

Why easing matters more than duration

Motion is about speed changes.

Nothing in the physical world starts or stops instantly. A drawer accelerates as you pull it and slows as it reaches the end. Linear motion, the same speed from start to finish, reads as mechanical because of that. Easing is the change of speed over time, and it is the difference between a panel that glides in and one that jerks.

Duration still matters, but it is the second decision. A 300ms slide with a strong ease-out feels quicker than a 200ms linear slide, because most of the distance is covered in the first few frames and the eye reads that as responsive.

The four numbers in cubic-bezier()

Two points, one curve.

cubic-bezier(x1, y1, x2, y2) describes a curve that always starts at 0,0 and ends at 1,1. The horizontal axis is time and the vertical axis is progress. The four numbers are the positions of two control points that pull the curve away from a straight line. The first point shapes the start of the motion, the second shapes the end.

x values are time, so they must stay between 0 and 1; the browser ignores the rule otherwise. y values are progress and can go beyond that range, which is how overshoot is made. The CSS keywords are just named curves: ease is cubic-bezier(0.25, 0.1, 0.25, 1) and ease-out is cubic-bezier(0, 0, 0.58, 1).

Reading a curve at a glance

Steep is fast, flat is slow.

Look at the slope. Where the curve is steep, progress changes quickly and the element moves fast. Where it is flat, the element barely moves. An ease-out curve rises steeply at the start and flattens at the end, so the element arrives quickly and settles. An ease-in curve does the opposite.

In the Cubic Bezier Generator, the dashed diagonal marks linear motion. Drag the pink point to shape the start and the blue point to shape the end, and the two playback lanes show your curve against any reference you pick, such as linear or ease. Switching the test from Move to Scale or Fade shows how the same curve feels on different properties.

Curves that suit common interface motion

Match the curve to the event.

A few rules of thumb cover most interface work. They are starting points, so adjust by eye in the preview.

Entering elements, such as menus, toasts and modals: an ease-out curve like easeOutQuart, cubic-bezier(0.25, 1, 0.5, 1), so they appear quickly and settle.
Leaving elements: an ease-in curve like easeInQuad, cubic-bezier(0.11, 0, 0.5, 0), usually a little shorter than the entrance.
Moving between two places on screen: an ease-in-out curve like easeInOutCubic, cubic-bezier(0.65, 0, 0.35, 1).
Playful confirmation, such as a badge or a like button: easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), which overshoots slightly.
Progress indicators and spinners: linear, because a changing speed looks like a stall.

Overshoot and anticipation

Going past the line on purpose.

When y2 is above 1, the curve rises past the top of the square before coming back, so the element travels beyond its end value and settles back. That is overshoot, and it gives motion a springy, physical feel with no extra keyframes. When y1 is below 0, the curve dips first, so the element pulls back slightly before moving forward. That is anticipation, the wind-up before a throw.

Overshoot only shows on properties that can go past their end value. A translate or scale overshoots clearly. Opacity cannot go above 1 and colors cannot go past their channel limits, so on those properties the extra part of the curve is clamped and simply holds. The generator warns you when a curve leaves the 0 to 1 range for that reason.

Using the curve in CSS, Tailwind and JavaScript

One value, many places.

The same string works in transition-timing-function, animation-timing-function and the shorthands, for example transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);. Storing it in a custom property such as --ease-out keeps every component on the same curve. In Tailwind, use an arbitrary class like ease-[cubic-bezier(0.22,1,0.36,1)] or register the curve in the theme. The Web Animations API accepts the same string in its easing option.

The generator writes all of these, and the share link keeps the curve in the URL. For full keyframe animations with a curve applied, the CSS Animation Generator uses the same curve editor under Custom curve.