CSS cubic-bezier generator

Drag the two handles to shape an easing curve, try a preset, and press Play to feel the timing. Copy the ready-to-use cubic-bezier() value — everything updates live in your browser.

Presets

Animation preview

Duration1.0s

Animate

cubic-bezier value

Everything runs in your browser. No upload, no sign-up.

How it works

STEP 1

Shape the curve

Drag the two coloured handles on the curve. Each is a control point — its X is clamped to 0–1, while Y can overshoot for bouncy easing.

STEP 2

Preview the motion

Press Play to animate a box across the track using your curve as the CSS transition-timing-function, so you can feel the easing, not just see the line.

STEP 3

Copy the value

Copy the cubic-bezier(x1, y1, x2, y2) value — or the full transition line — with one click and paste it into your stylesheet. Nothing is uploaded.