← All text tools

Cubic bezier generator

Drag a curve to design CSS easing, see it animate and copy the timing function.

  • Free
  • No sign-up
  • Works on any device

About Cubic bezier generator

Drag the two control handles of a bezier curve to design custom easing for CSS transitions and animations, watch a ball animate with it and copy the cubic-bezier(x1, y1, x2, y2) value. The x values must stay between 0 and 1, while y can overshoot for a bounce effect.

How to use Cubic bezier generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

What do the four cubic-bezier numbers mean?

They are the x and y coordinates of two control points on the speed curve. Steeper sections mean faster movement, flatter sections mean slower movement.

Is Cubic bezier generator free?

Yes. Cubic bezier generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools