cubic-bezier · CSS easing · motion
Drag the curve. Watch the motion. Copy the code.
A live cubic-bezier() editor: shape an easing, see it animate beside a linear one, and copy
CSS / Framer Motion / Web Animations code.
Easing presets & cubic-bezier values
| Easing | Family | cubic-bezier() |
|---|---|---|
| linear | CSS | cubic-bezier(0, 0, 1, 1) |
| ease | CSS | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | CSS | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | CSS | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | CSS | cubic-bezier(0.42, 0, 0.58, 1) |
| easeInSine | Sine | cubic-bezier(0.12, 0, 0.39, 0) |
| easeOutSine | Sine | cubic-bezier(0.61, 1, 0.88, 1) |
| easeInOutSine | Sine | cubic-bezier(0.37, 0, 0.63, 1) |
| easeInQuad | Quad | cubic-bezier(0.11, 0, 0.5, 0) |
| easeOutQuad | Quad | cubic-bezier(0.5, 1, 0.89, 1) |
| easeInOutQuad | Quad | cubic-bezier(0.45, 0, 0.55, 1) |
| easeInCubic | Cubic | cubic-bezier(0.32, 0, 0.67, 0) |
| easeOutCubic | Cubic | cubic-bezier(0.33, 1, 0.68, 1) |
| easeInOutCubic | Cubic | cubic-bezier(0.65, 0, 0.35, 1) |
| easeInQuart | Quart | cubic-bezier(0.5, 0, 0.75, 0) |
| easeOutQuart | Quart | cubic-bezier(0.25, 1, 0.5, 1) |
| easeInOutQuart | Quart | cubic-bezier(0.76, 0, 0.24, 1) |
| easeInExpo | Expo | cubic-bezier(0.7, 0, 0.84, 0) |
| easeOutExpo | Expo | cubic-bezier(0.16, 1, 0.3, 1) |
| easeInOutExpo | Expo | cubic-bezier(0.87, 0, 0.13, 1) |
| easeInCirc | Circ | cubic-bezier(0.55, 0, 1, 0.45) |
| easeOutCirc | Circ | cubic-bezier(0, 0.55, 0.45, 1) |
| easeInOutCirc | Circ | cubic-bezier(0.85, 0, 0.15, 1) |
| easeInBack | Back | cubic-bezier(0.36, 0, 0.66, -0.56) |
| easeOutBack | Back | cubic-bezier(0.34, 1.56, 0.64, 1) |
| easeInOutBack | Back | cubic-bezier(0.68, -0.6, 0.32, 1.6) |
How it works
Two control points define a Bezier between the fixed (0,0) and (1,1). The X of each
point stays in 0–1; the Y can overshoot above 1 / below 0 for springy "back" motion. Animate transform
and opacity for the smoothest results.
Questions
It is the curve CSS uses to map animation time (the X axis, 0 to 1) to progress (the Y axis). You set two control points; the browser draws a smooth Bezier between the fixed start (0,0) and end (1,1). "ease", "ease-in-out" and friends are just named cubic-bezier curves. EasingLab lets you drag those two points and instantly see and copy the result.
The X of each control point must stay between 0 and 1 (time only moves forward), but the Y is unconstrained. A Y above 1 or below 0 makes the value overshoot and settle back — that is exactly how "back" and bounce-like easings (e.g. easeOutBack) feel springy. The two preview balls show it: the eased one shoots past the linear one and returns.
Four ready-to-paste forms of the same curve: a CSS transition, a CSS @keyframes animation, a Framer Motion transition (the ease array), and a Web Animations API call (element.animate). Pick the tab, set the duration and demo property, and copy.
It generates standard CSS cubic-bezier curves, which cover the vast majority of UI motion including springy "back" overshoots. True physics springs and multi-bounce curves are not a single cubic-bezier — for those use a spring config in your animation library (e.g. Framer Motion type:"spring"). The presets here approximate the popular easing families from easings.net.
No. The editor, the live preview and the code generation all run entirely in your browser. There is no backend and nothing is logged.
The math is identical across modern browsers — cubic-bezier() is part of the CSS Easing spec. Small differences come only from frame rate and the property you animate (transform and opacity are the smoothest because they are GPU-composited).