cubic-bezier generator

Drag the easing curve and get the CSS.

Drag the two blue points to adjust the curve. Use it for transition-timing-function.

Your dropdown opens, but it feels wrong - stiff, or oddly floaty, and none of the built-in keywords fix it. ease, ease-in and friends are only five fixed curves, and sometimes the motion you want sits between them. This tool lets you shape the curve by hand and watch a real element move with it before you commit the value to your stylesheet.

How it works

How the curve works

CSS animates a property from a start value to an end value over a set duration. A timing function decides how far along that change is at each moment. cubic-bezier(x1, y1, x2, y2) describes this with two control points: (x1, y1) pulls the beginning of the curve, (x2, y2) pulls the end. The horizontal axis is elapsed time (0 to 1) and the vertical axis is progress (0 to 1).

Reading the two points

A point dragged right delays movement - the element hesitates, then catches up.
A point dragged up makes it rush ahead early.
Wherever the curve is steep, the element is moving fast.

X stays between 0 and 1 because time cannot run backwards, but Y is free to go below 0 or above 1. That overshoot is what makes an element pull back slightly before it moves, or sail past its target and settle - the bounce preset does exactly that with cubic-bezier(0.68, -0.55, 0.27, 1.55).

Presets as starting points

Preset	Value	Feel
linear	0, 0, 1, 1	Constant speed, mechanical
ease	0.25, 0.1, 0.25, 1	The CSS default; quick start, soft landing
ease-in	0.42, 0, 1, 1	Slow start, fast exit
ease-out	0, 0, 0.58, 1	Fast start, slow landing
ease-in-out	0.42, 0, 0.58, 1	Symmetrical on both ends

Pick the closest preset, then drag from there. Preview runs the curve on a moving element, and Copy takes the finished transition-timing-function line.

One caveat: an easing curve controls pacing, not length. A transition that still feels wrong is often a duration problem - adjust the seconds in your transition shorthand before blaming the curve.

Terms explained

Control point: One of the two draggable blue handles. Their coordinates become the four numbers inside cubic-bezier().
Elapsed time (X axis): How far through the duration you are, from 0 at the start to 1 at the end.
Progress (Y axis): How much of the change has happened, from 0 (start value) to 1 (final value).
Overshoot: A curve that dips below 0 or rises above 1, so the element moves past its target and comes back.
transition-timing-function: The CSS property this tool writes. It takes the cubic-bezier() value and controls the pacing of a transition.

Frequently asked questions

Can I use this value for keyframe animations too?

Yes. The same cubic-bezier() value works in animation-timing-function and in the animation shorthand, not only in transitions. Note that inside a @keyframes rule the timing function applies between each pair of keyframes rather than across the whole sequence.

Why can I drag the points up and down freely but not left and right?

The X axis represents time, which only runs from the start of the transition to the end, so it is clamped between 0 and 1. The Y axis represents progress, which is allowed to fall below the start value or exceed the end value. That freedom is what produces bounce and anticipation effects.

What is the difference between ease-in and ease-out?

ease-in starts slowly and speeds up toward the end, which suits elements leaving the screen. ease-out starts fast and slows into place, which usually feels better for elements arriving, because the motion settles where the user is already looking.

My animation still feels off after changing the curve. What else matters?

Duration is usually the bigger factor: most interface transitions land between 150ms and 400ms, and anything much longer feels sluggish whatever the curve. It also helps to animate transform and opacity rather than properties like width or top, which force the browser to redo layout on every frame.