Skip to content
FR

Cubic-bezier generator

Draw a cubic-bezier animation curve with the mouse, compare it with a linear animation and copy the value for transition or animation.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Fine-tune the speed of your animations: drag the two control points of the cubic-bezier curve, start from 13 well-known curves (ease, easeOutExpo, easeInOutBack…) and compare the motion with a linear animation. The value is ready for transition, animation or Tailwind.

When to use it

More natural interfaces

A menu opening with easeOutExpo starts fast and settles gently: it feels more responsive than constant speed.

Bounce effects

A curve slightly above 1 (easeOutBack) gives a small bounce to a dialog as it appears.

Design system consistency

Defining two or three custom curves and reusing them everywhere gives a product's animations a consistent personality.

How to use

  1. Drag the two control points, or start from a known curve.
  2. Run the comparison to feel the motion.
  3. Copy the cubic-bezier value.

How it works

A cubic Bézier curve starts at (0, 0), ends at (1, 1), and its shape is set by two control points. The chart plots 60 points of the curve; the handles move with the mouse or the arrow keys.

The comparison animates two balls with a CSS transition: one with your curve, the other linear, over the same duration. CSS keywords (ease, ease-in…) are recognized and written as such.

Tips for best results

  • For things appearing, use a curve that slows at the end (ease-out); for things leaving, the opposite.
  • Keep bounces for small elements: on a large panel they are tiring.
  • One curve for all of a site's transitions makes it feel consistent.
  • Test at the real duration: a curve feels different at 200 ms and at 1 s.

Common problems and fixes

The point won't go further right

Horizontal values are limited to 0–1: time can't go backwards.

The animation looks choppy

The curve isn't the cause: animate transform and opacity rather than width, top or margin.

The Tailwind class doesn't work

ease-[cubic-bezier(…)] requires Tailwind 3 or later; the value must not contain spaces.

Frequently asked questions

What does the curve show?

The horizontal axis is time, the vertical axis is the animation's progress. A steep start moves fast; a curve going above 1 overshoots the target then comes back (bounce effect).

What's the difference between ease, ease-in and ease-out?

ease-in starts slowly and ends fast, ease-out starts fast and slows down at the end, ease-in-out slows at both ends. ease is a snappier variant of ease-in-out.

Why can the points leave the frame?

Vertical values can go below 0 or above 1: the animation pulls back before starting or overshoots its target, like the “back” curves.

Where do I use the value?

In transition-timing-function or animation-timing-function, or directly in the shorthand transition: transform 0.3s cubic-bezier(…).

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.