BluebirdBluebird
Home/Cubic Bezier Editor

Cubic Bezier Editor

Drag two handles to design CSS easing curves with a live animation preview — copy ready-to-paste cubic-bezier().

  • Runs in your browser
  • No upload on server
  • Free, forever
  1. Paste input
  2. Run
  3. Copy result
How this works
  1. 1
    Drag the handles

    Grab the two control points and pull. The curve's shape decides how your animation eases.

  2. 2
    Preview the motion

    A little dot rides the curve so you can feel the timing, not just see it.

  3. 3
    Copy the CSS

    Grab the cubic-bezier() line and paste it into your transition or animation.

Watch: drag a handle, CSS updates live
copy
Curve editor
P1
P2
Live preview
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
How this works
  • Drag the two blue handles to shape the curve — or pick a preset.
  • The animation replays automatically so you can feel the motion.
  • Copy the ready-to-paste cubic-bezier() string into your CSS.

Rate Cubic Bezier Editor

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate