FIRST CH TOOLS / Design / 51 CUBIC-BEZIER EASING PREVIEW

cubic-bezier Easing Preview & Comparison

Shape the speed curve of a CSS animation by dragging the bezier handles. Two easings run side by side at the same time, so you can see which one feels right instead of guessing. Classic presets such as ease-out-expo, and a linear() approximation of any curve.

Shape the curve

Compare with B

time 0.0 → 1.0

Horizontal = time (0 → 1), vertical = progress (0 → 1). Drag the round handles, or focus one and use the arrow keys (Shift for ten times the step). Edits go to the curve you have selected (currently Curve A). The shaded band is the area outside 0–1, where the motion overshoots.

Type the numbers

X1 (time) Y1 (progress) X2 (time) Y2 (progress)

Paste a value measured on another site (the cubic-bezier(…) you copied out of DevTools) straight into this field. Keywords such as ease-out and preset names such as ease-out-expo are understood too.

Run them side by side

Loop

Duration 900ms Property

ease-out-back0%

ease0%

Elapsed 0%

The thin lines under each track mark the position at evenly spaced moments in time. Where they bunch up the motion is slow; where they spread out it is fast. The vertical lines inside the track sit at progress 0 and 1, so an overshooting curve visibly runs past the line and comes back.

110.0%

Highest point

0.00×

Fastest moment (vs average)

linear() points

Approximation error

Generated CSS

Approximate with linear() Precision

Because linear() is a polyline it can express motion that no cubic-bezier can — bounces, springs, several bursts of acceleration. What you get here is the selected curve rewritten as that polyline.

Checks

Pick the colours you animate with the Colour Code Converter, build background gradients in the CSS Gradient Generator, and size type against the viewport with the CSS clamp() Calculator.

How to read it, and what trips people up

The vertical axis is progress, not position

The vertical axis is how far through the animation you are (0 = the start value, 1 = the end value). That is why one curve works for movement, scaling and colour alike. The slope of the curve is the speed at that instant: a steep start means "fast off the mark", a flat finish means "settles slowly".

The first and third numbers must stay in 0–1

In cubic-bezier(x1, y1, x2, y2) the values x1 and x2 live on the time axis, so CSS refuses anything outside 0–1. Write a value outside it and the whole declaration is discarded as invalid, leaving you with the default ease. y1 and y2 have no such limit — they may exceed 1 or go negative, and that is exactly what produces "overshoot and settle".

Where overshoot works, and where it does not

A curve whose progress passes 1 (ease-out-back and friends) gives transform and position a satisfying go past and come back motion. On properties with a hard ceiling — opacity, colours, width: 100% — the excess is simply clipped, and all you get is a flat, drawn-out ending. That is why back curves never pay off on a fade.

Fast in, slow to stop (the ease-out family)

Elements that arrive on screen, and anything responding to a tap, are conventionally ease-out: quick off the mark, gently settling. Moving instantly on press is what makes an interface feel responsive. Elements that leave do not need to be watched, so ease-in gets them out of the way without making anyone wait. Things that move both ways — a panel that opens and closes — should use the matching ease-in-out pair.

Suspect the duration before the curve

When something "feels sluggish" the cause is nearly always the duration, not the curve. A small state change wants 150–250ms, a panel opening 250–400ms, a full-screen transition around 500ms, and longer distances want slightly longer times. Drag the duration slider here and watch how much the same curve changes character.

Expo curves do not read as "fast" — they read as "teleport"

Strong curves such as ease-out-expo reach many times the average speed at their fastest instant (see "Fastest moment" in the figures above). Pair that with a short duration and the eye sees a jump, not a movement. If you want a strong curve, give it a little more time.

What a cubic-bezier cannot do — enter linear()

A cubic bezier can carry one hill and one dip at most, so a ball bouncing several times, or motion that pauses and starts again, is out of reach. CSS linear() describes the timing as a polyline through a list of points, which covers all of that in one line. The linear() output on this page is the selected curve rewritten as a polyline, dropping points until the vertical error falls under the chosen threshold (the error and the point count are in the figures above). linear() needs Chrome 113, Safari 17.2 or Firefox 112, so keep a cubic-bezier() line above it as the fallback.

The steps() cousin

The other member of the timing-function family is steps(n), which deliberately jumps in stages instead of smoothing — sprite animation, a ticking second hand. It cannot be combined with a bezier (it is one or the other), so when you want a stepped feel, switch the function rather than bending the curve.

Always honour the reduced-motion setting

Some people turn on "reduce motion" in their operating system. Decorative animation belongs inside @media (prefers-reduced-motion: reduce) where it is switched off (transition: none, animation: none); this also feeds into WCAG 2.2 SC 2.3.3 (Animation from Interactions). This page watches the same setting and will not autoplay the preview when it is on.

Animate transform and opacity, nothing else

However good the curve, animating a property that forces layout again — width, top, margin — will stutter. Move with translate, resize with scale, appear and disappear with opacity, and the browser can skip both layout and paint.

How to Use

Shape the curveDrag the handles on the graph, or pick something like ease-out-expo from the Presets tab. A cubic-bezier(…) copied from another site goes straight into the paste field.
Put them side by sideLoad a different easing into Curve B and the two run together. Change the duration and the property so you are judging them under the conditions you will actually ship.
Copy and paste"Copy value" gives you the bare cubic-bezier(…); "Copy declaration" gives the CSS with the custom properties. The linear() approximation has its own copy button.

About This Tool

Easing is progress plotted against time. CSS cubic-bezier(x1, y1, x2, y2) is a cubic bezier from (0,0) to (1,1) bent by two control points, with time on the horizontal axis and progress on the vertical one. This page lets you drag those control points and watch the shape, the actual motion and the CSS at the same time. Progress is computed exactly the way browsers do it (WebKit's UnitBezier): Newton-Raphson to invert the time axis, falling back to bisection on the stretches where it will not converge — so what you see here is what the CSS you copy will do.

Running two curves at once is the point. An easing on its own tells you very little. Put different curves in A and B and they run over the same duration and the same distance, which makes the difference obvious. The thin lines under each track are the positions at evenly spaced moments — a strobe trail, so their density is the speed distribution (bunched up = slow). So that an overshooting curve never escapes its track, the value ranges of A and B are mapped together onto the width of the track; progress 0 and 1 are therefore marked by the vertical lines inside it.

It also exports a linear() approximation. A cubic bezier cannot carry more than one hill, so a bounce is impossible to write with one. CSS linear() specifies the timing as a polyline through a list of points; this tool samples the curve at 600 places and then drops points until the vertical (progress) error is under the chosen threshold. Measuring the error horizontally, or by spacing the points evenly, hides the error on the steep stretches — since linear() interpolates straight between its points, the vertical difference is the one that matters. The real maximum error and the resulting point count are shown with the figures.

Handy for checking a value you measured elsewhere. Paste a cubic-bezier(…) lifted from DevTools and you immediately see both the shape and the motion. Everything runs in the browser and nothing is uploaded. Directly callable via URL parameters: /en/easing/?a=0.34,1.56,0.64,1&b=ease-out-expo&dur=900&prop=x