Skip to content
M2TOOLKIT

Popular tools

Menu

Cubic Bezier Easing Generator

Design the exact feel of your animations.

  • Free
  • No sign-up
  • Runs in your browser
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.