Cubic Bezier Editor
Drag a curve, preview the motion, then copy the exact easing for CSS, Framer Motion or Tailwind.
transition: transform 500ms cubic-bezier(.25, .1, .25, 1)Use arrow keys to move the selected bezier handle by 0.1. Hold Shift for 0.01. Hold Alt to snap to the grid.
Why this exists
Four numbers do not tell you how an animation will feel. This editor turns them into a curve and a moving preview, then gives you the exact value for CSS, Framer Motion or Tailwind.
That also makes motion easier to hand to an engineer or coding agent. The result is a value they can use, not a request to “make it snappier”.
How cubic-bezier easing works
A cubic-bezier() curve starts at (0, 0) and ends at (1, 1). Its four values position two handles that shape acceleration and deceleration. CSS keeps x between 0 and 1; y can move beyond that range to create anticipation or overshoot.
The named presets come from Robert Penner’s easing equations. Sine, Quad, Cubic, Quart, Quint, Expo, Circ and Back can be represented with cubic-bezier(). Elastic and Bounce cannot, so the editor exports them as sampled linear() curves. For motion based on spring physics, use the Spring Visualizer.
Hold Shift while dragging to snap the handle angle. Hold Alt to snap to a 0.1 grid.
Frequently asked questions
What is a cubic-bezier easing curve?
It is a CSS timing function defined by four numbers: cubic-bezier(x1, y1, x2, y2). Those values place two control handles between the fixed start and end points. Moving the handles changes how quickly the animation accelerates, slows down or overshoots.
Why do elastic and bounce presets use linear()?
A single cubic-bezier() curve cannot oscillate. CSS linear() can describe a sampled sequence of points, so it can reproduce the repeated peaks of elastic and bounce easings.
What can I paste into the editor?
Paste cubic-bezier(), linear(), four bare numbers, a CSS easing keyword or a full transition rule. If the value contains a duration such as 500ms, the preview updates that too.