Free · no sign-up · nothing leaves your browser

CSS Easing Workbench

Drag the Bézier handles or dial in spring physics, watch the card move, then copy a paste-ready cubic-bezier() or linear() timing function — duration and delay included.

Curve editor

Handles are draggable in Bézier mode; bounce drives the curve in spring mode.

cubic-bezier()

Mode

Spring Bézier

Spring physics, or hand-dragged control points.

Easing preset

Overwrites the handles and switches to Bézier; custom restores yours.

Timing

Duration

Milliseconds, 50–5000.

Delay

Milliseconds, 0–2000.

Bounce 35%

The coil compresses as the bounce rises. Spring mode only.

Live preview

Click the stage to replay. Editing any control replays it too.

CSS output

paste into your stylesheet

linear() needs Chrome 113+, Safari 17.2+ or Firefox 112+.

How it works

1 · Choose a model

Spring mode solves a damped oscillator from the bounce slider. Bézier mode hands you two control points to drag.

2 · Tune against the preview

Duration, delay and curve all feed the moving card, so you feel the change instead of guessing at numbers.

3 · Copy the declaration

You get a ready transition plus the bare animation-timing-function, with every value already clamped and formatted.

Preset cheat sheet

What each built-in keyword really expands to — pick one in the editor and drag from there.

linear

linear(0, 1)

Constant speed.

ease

cubic-bezier(.25, .1, .25, 1)

The browser default.

ease-in

cubic-bezier(.42, 0, 1, 1)

Slow start, hard finish.

ease-out

cubic-bezier(0, 0, .58, 1)

Fast start, soft landing.

ease-in-out

cubic-bezier(.42, 0, .58, 1)

Symmetric acceleration.

anticipate

cubic-bezier(.36, 0, .66, -.56)

Winds up backwards first.

FAQ

Why does spring mode export linear() and not cubic-bezier()?

A cubic-bezier() can only describe one smooth bump, and a fixed-duration spring starts far faster than any single bump allows. The workbench samples the real spring maths into 40 evenly spaced stops, which linear() interpolates exactly.

Can a cubic-bezier overshoot?

Yes — y1 and y2 may sit outside 0–1, which is how anticipate-style wind-ups work. Only x1 and x2 must stay within 0–1, and the editor clamps them for you.

What happens to blank or silly numbers?

Duration is clamped to 50–5000 ms and delay to 0–2000 ms, rounded to whole milliseconds. Empty or negative fields fall back instead of emitting broken CSS, and the field snaps to the clamped value when you leave it.

Is anything uploaded?

No. The spring integration, curve solving and code formatting run entirely in this page — there is no server round-trip and no account.