Cubic Bezier Curve Editor
Design a CSS cubic-bezier() easing function with a live preview.
Overview
The Cubic Bezier Curve Editor lets you drag the two control handles of a cubic-bezier() easing function and previews the resulting motion against the standard ease, ease-in, ease-out, and ease-in-out curves. Output is the four-number cubic-bezier(x1, y1, x2, y2) declaration ready for animation-timing-function or transition-timing-function.
Useful when learning how to design a custom CSS easing function or how to build an overshoot bezier curve. Designers and animators reach for it tuning micro-interactions where the default easings look generic.
How it works
A CSS cubic Bezier is defined by four control points: P0 (0, 0), P3 (1, 1), and two adjustable points P1 (x1, y1) and P2 (x2, y2). The curve maps time (x axis, 0 to 1) to progress (y axis). When the curve y-value rises faster than x, the animation feels accelerated; when it lags behind, it feels decelerated.
Control points outside the 0-1 y range produce overshoot or anticipation — the y-value briefly exceeds 1 or dips below 0, which the browser allows for properties that support negative values (transforms, opacity is clamped). The editor allows out-of-range handles for these tasteful overshoot effects.
Examples
- Material easing →
cubic-bezier(0.4, 0, 0.2, 1). - Overshoot bounce →
cubic-bezier(0.34, 1.56, 0.64, 1). - Slow start, snap finish →
cubic-bezier(0.7, 0, 0.84, 0). - Symmetric ease-in-out alternative →
cubic-bezier(0.65, 0, 0.35, 1).
FAQ
Why doesn't my overshoot work on opacity?
Opacity is clamped to 0-1. Overshoot only shows on transforms and other unbounded properties.
cubic-bezier vs steps()?
cubic-bezier is smooth. steps() is discrete — useful for sprite-sheet animations or counter increments.
Can I copy curves between tools?
Yes — the four numbers are portable across every framework and design tool (Framer Motion, CSS, Lottie, Figma) that uses cubic Bezier easings.
Is linear ever the right answer?
For looping animations like loading spinners, yes — linear produces uniform speed and avoids the visible jolt of cyclic ease-in-out.