Cubic Bezier Easing Visualizer
Drag the two control points to design custom cubic-bezier() easing curves and preview the timing on a live animation.
Drag the two control points to design custom cubic-bezier() easing curves and preview the timing on a live animation.
Drag the two control points to design custom cubic-bezier() easing curves. Compare against the CSS keywords, watch a live animation, and copy the exact transition CSS.
Drag the red and blue handles to reshape the curve. Dotted line is ease-in-out for reference.
x is constrained to 0–1. y can go negative or above 1 for anticipation and overshoot.
/* Transition shorthand */
transition: transform 1.5s cubic-bezier(0.42, 0, 0.58, 1);
/* Animation shorthand */
animation: slide 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}cubic-bezier(x1, y1, x2, y2) defines a CSS easing curve from a fixed start anchor at (0, 0) to a fixed end anchor at (1, 1). The two pairs of numbers are the control points P1 (red) and P2 (blue). P1 shapes the curve as it leaves the start; P2 shapes how it approaches the end. Drag either handle in the editor to reshape the curve in real time.
Read the curve like a graph: the horizontal axis is the animation’s progress through time (0% to 100% of its duration), and the vertical axis is how far along the value has moved (0% to 100% of its change). A perfectly diagonal line is linear — equal progress per unit time. A curve that bows above the diagonal accelerates fast and decelerates at the end ( ease-out ); a curve that bows below accelerates slowly ( ease-in ).
Drag the y-coordinate of either handle above 1 (or below 0) to get an overshoot. The animated value will pass its destination, snap back, and settle. This is what motion libraries call a “back” or “spring” easing — try the Back out and Anticipate presets to see how the y can leave the unit square. The x-coordinate is always clamped to 0–1 because a cubic-bezier easing must be a function of time (one y per x).
Match the curve against your design system. The five CSS keyword presets (linear, ease, ease-in, ease-out, ease-in-out) are exact equivalents — selecting one loads the same numbers a browser would use internally. The Material and iOS presets reproduce the most common easing tokens from those design systems so you can drop them into a CSS-in-JS theme or animation library directly. Everything runs locally in your browser; no easing data leaves your device.