Tune CSS easing curves

cubic-bezier(0.25, 0.1, 0.25, 1) is CSS's default ease — see the curve, feel a preview, and copy the value.

Tools used in this guide

Cubic-bezier editor

The job

Easing decides whether a UI feels snappy, lazy, or playful. The four numbers are unreadable alone — a live curve plus a moving marker makes them legible.

Tune

Adjust x1/y1/x2/y2 or start from a preset (ease, ease-in, ease-out, ease-in-out, linear). The curve draws live; the preview loops a marker along it; copy emits the cubic-bezier() call.

x is the input axis and stays in 0–1; y is the output and may dip below 0 or above 1 — that is what overshoot looks like.
CSS transitions accept the same value everywhere easing is taken.

Worked example

ease-out (0, 0, 0.58, 1) starts fast and settles gently — the standard pick for menus and tooltips that should feel instant.

Where it stops

One segment of cubic-bezier only — no springs, steps(), or multi-bounce curves. The preview marker shows timing, not a real DOM transition.