Easing Function Visualizer

See easing curves drawn live and preview the animation before using it in CSS.

Preset:

Curve:

Preview:

CSS:

transition-timing-function: ease;

How to use

Pick a preset or craft a custom cubic-bezier, watch the curve and the dot animate. Everything runs in your browser.

What is an easing function?

It controls how an animation accelerates — linear moves evenly, ease-in starts slow, and so on.

Can I make a custom curve?

Yes — pick Custom and drag the four cubic-bezier numbers, or type them directly.

☕

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