Cubic Bezier Easing Generator
Drag the curve to craft a cubic-bezier() easing — with a live motion preview.
About Cubic Bezier Easing Generator
Cubic Bezier Easing Generator builds CSS cubic-bezier() timing functions visually. Drag the two control handles to shape the curve, or start from a preset: the classic four (ease, ease-in, ease-out, ease-in-out), plus linear and three 'back' variants — back-in anticipates (dips below before moving), back-out overshoots, and back-in-out does both. A looping motion preview underneath shows how the curve actually feels in real time, so you can tune the personality of the animation by eye instead of by trial-and-error.
Worked example: the CSS keyword 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1) — a curve that starts and ends gently with most of the change in the middle. A snappier 'pop-in' might be cubic-bezier(0.34, 1.56, 0.64, 1), which overshoots slightly before settling, giving the element a small bounce at the end. Drag the second handle above the top edge to produce that overshoot; drag it below the bottom for an 'anticipate then go' effect. Copy the resulting cubic-bezier(...) into a CSS transition or animation-timing-function.
A note on what cubic-bezier can and cannot do. The control-point x coordinates are clamped between 0 and 1 (time only moves forward), but y can extend beyond 0 and 1 — that is exactly what enables overshoot and anticipate effects. Each cubic-bezier defines one continuous segment; for true spring physics, multi-stop sequences, or asymmetric curves a single bezier cannot describe, modern CSS offers the linear() function and JS animation libraries (Framer Motion, GSAP) handle the rest.
All design happens in your browser.