Easing Curve Visualizer

Visualize cubic-bezier easing curves on canvas — presets plus custom values with an animated dot demo.

Preset:

x1:

y1:

x2:

y2:

transition-timing-function: …

How to use

Pick a preset or enter custom values, watch the curve and the animated dot, then copy the CSS.

What presets are included?

ease, linear, ease-in, ease-out, ease-in-out, plus snappy custom presets like easeOutBack.

Can I use custom values?

Yes — type any four cubic-bezier numbers and watch the curve redraw instantly.

☕

Every tool runs 100% in your browser — no uploads, no signups. If a tool saved you time, consider supporting us with a small donation.