cubic-bezier · CSS easing · motion
Drag the curve. Watch the motion. Copy the code.
EasingLab is a live cubic-bezier() editor: move the two handles and a ball animates
your curve in real time — next to a linear one so you feel the lead, lag and overshoot. Grab the result as a CSS
transition, @keyframes, a Framer Motion ease array, or a Web Animations call.
cubic-bezier(0.34, 1.56, 0.64, 1).box {
transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}Live in your browser — drag the two handles, pick a preset, and copy production-ready code. CSS cubic-bezier() per the CSS Easing spec; the X of each control point stays within 0–1, Y may overshoot.
Easing presets & their cubic-bezier values
The standard CSS keywords plus the popular families from easings.net. Click any of them in the editor above to load and tweak.
| 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 EasingLab works
- Drag the two handles (or type x1, y1, x2, y2): the X of each stays in 0–1, the Y can overshoot for springy motion.
- Watch the live preview — the eased ball vs a linear ball shows lead, lag and overshoot in real time.
- Pick a duration and the property to demo (translate, opacity, scale, rotate).
- Copy the curve as a CSS transition, @keyframes, Framer Motion ease array, or a Web Animations call.
Animate transform and opacity where you can — they are GPU-composited and
stay smooth even on long durations; animating layout properties (width, top, margin) is what makes motion janky.
Questions
What is a cubic-bezier easing?
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.
Why can the curve go above 1 or below 0?
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.
Which code can I copy?
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.
Can EasingLab do springs or bounce?
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.
Does anything I do get sent to a server?
No. The editor, the live preview and the code generation all run entirely in your browser. There is no backend and nothing is logged.
Will the same curve look identical in every browser?
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).