Skip to content
M2TOOLKIT

Popular tools

Menu

Design · free tool

Cubic Bezier Easing Generator

Design the exact feel of your animations.

Use it as often as you like — it's free, with no sign-up and no limits.

Try it free
  • Design
  • Free
  • No sign-up
  • Runs in your browser
  • Updated
cubic-bezier(0.34, 1.56, 0.64, 1)
1.0s

Your curve

linear

Y values below 0 or above 1 make the motion overshoot — the “back” and “elastic” feel.

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the Cubic Bezier Easing Generator

  1. Drag the orange and blue handles, or start from a preset.
  2. Press play to compare your curve with linear motion.
  3. Copy the cubic-bezier() value.

What does this tool do?

Easing makes motion feel natural: ease-out for things entering the screen, ease-in for things leaving, and curves with y values outside 0–1 for playful overshoot (“back” easing). The x values must stay between 0 and 1; y values can go from −1 to 2.

Why use it?

  • Drag-to-edit curve.
  • Side-by-side preview.
  • Popular presets.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the cubic bezier easing generator.