Cubic-bezier editor

Craft custom CSS easing by dragging the two control points of a cubic-bezier curve, watch a live animation preview and copy the ready cubic-bezier() value.

How to use

1. Drag the blue and red handles to shape the curve
2. Watch the preview dot animate with your easing
3. Or start from a preset: ease, ease-in, ease-out, ease-in-out, linear
4. Click the value to copy the cubic-bezier() string

Frequently asked questions

What is a cubic-bezier easing?

A CSS timing function defined by two control points that shapes how an animation accelerates and decelerates over time.

Can the curve overshoot?

Yes — the Y of a control point can go below 0 or above 1 to create bounce/overshoot effects; X stays within 0–1 as CSS requires.

Where do I use the value?

In transition-timing-function or animation-timing-function, e.g. transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1).