Home › Developer Tools › Cubic Bezier Generator

Cubic Bezier Generator

Shape a custom CSS easing curve by dragging the two control points, watch it race against linear (or any other easing), then copy the cubic-bezier() value or a ready-made transition line.

Drag P1 and P2, or focus one and use the arrow keys (Shift = bigger steps).

Your easing

x1 y1 x2 y2

Paste a value

Loop

Effect

Duration

Yours

Presets

How to use the Cubic Bezier Generator

Start from a preset such as ease-out, Ease out back or Ease in-out expo.
Drag the two handles on the graph. P1 shapes the start of the motion, P2 the end; drag above 1 or below 0 for overshoot.
Press Play to compare your curve with linear or another easing; change the duration or turn on Loop.
Fine-tune with the four number fields or paste a value like cubic-bezier(0.2, 0.8, 0.2, 1).
Copy the cubic-bezier() value or the full transition line into your CSS.

How cubic-bezier() easing works

A CSS cubic Bézier curve is defined by four points: P0 = (0, 0) and P3 = (1, 1) are fixed, and you choose P1 = (x1, y1) and P2 = (x2, y2). For a parameter t from 0 to 1 the curve is:

B(t) = (1 − t)³·P0 + 3(1 − t)²t·P1 + 3(1 − t)t²·P2 + t³·P3

The browser finds the t whose x matches the elapsed fraction of the duration and uses the y value at that t as the animation progress. A steep part of the curve means fast movement, a flat part means slow movement, and y values above 1 or below 0 make the element overshoot.

Popular easing curves

Name	cubic-bezier()	Feels like
ease (default)	`0.25, 0.1, 0.25, 1`	Quick start, soft stop. A safe general choice.
ease-out	`0, 0, 0.58, 1`	Decelerates. Good for elements appearing.
ease-in	`0.42, 0, 1, 1`	Accelerates. Good for elements leaving.
Material standard	`0.4, 0, 0.2, 1`	Natural on-screen movement.
Ease out quint	`0.22, 1, 0.36, 1`	Snappy, strongly decelerating. Great for menus and modals.
Ease out expo	`0.16, 1, 0.3, 1`	Very fast then very gentle; feels premium.
Ease out back	`0.34, 1.56, 0.64, 1`	Overshoots and settles; playful pop-in.
Ease in-out back	`0.68, -0.6, 0.32, 1.6`	Anticipates, then overshoots.

Use the value in a transition such as transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);, or in keyframe animations built with the CSS Animation Generator.

Frequently asked questions

What do the four numbers in cubic-bezier() mean?

cubic-bezier(x1, y1, x2, y2) gives the coordinates of two control points, P1 and P2. The curve always starts at (0, 0) and ends at (1, 1). The x axis is time and the y axis is progress, so the slope of the curve is the speed at each moment.

Why must x values stay between 0 and 1?

x is time, and time has to move forward, so the CSS specification requires x1 and x2 to be in the range 0 to 1. A value outside that range makes the whole declaration invalid and the browser ignores it. y values can be any number.

How do I make an overshoot or bounce-back effect?

Use a y value above 1 or below 0. For example cubic-bezier(0.34, 1.56, 0.64, 1) overshoots the target and settles back (ease out back). A single cubic-bezier can overshoot once; for multiple bounces use keyframes or the CSS linear() function.

What cubic-bezier values do the CSS keywords use?

ease is cubic-bezier(0.25, 0.1, 0.25, 1), linear is (0, 0, 1, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1) and ease-in-out is (0.42, 0, 0.58, 1). ease is the default for transitions and animations.

Which easing should I use for UI animations?

Use ease-out style curves for elements entering the screen (fast start, gentle stop), ease-in for elements leaving, and ease-in-out for elements moving from one place to another on screen. Avoid linear for movement; it looks mechanical except for continuous spinning.

Where can I use the cubic-bezier value?

Anywhere CSS accepts an easing function: transition-timing-function, animation-timing-function, the transition and animation shorthands, per-keyframe timing, and the easing option of the Web Animations API (element.animate).

Related tools