EN
PT
ES
CSS Easing & Cubic-Bezier Visualizer
Drag the SVG handles, type values, or pick from 30+ named curves. Live animation preview and copy-ready output for vanilla CSS, GSAP, and Framer Motion.
What is a cubic-bezier curve?
A cubic-bezier curve is a parametric curve defined by four points: a start (always 0,0), an end (always 1,1), and two control handles whose coordinates you can choose. CSS, JavaScript animation libraries, and most design tools use this curve to map animation progress (0 → 1) onto value progress (0 → 1) — when the curve bends below the diagonal, the animation lags then catches up; above, it leaps then settles. The four numbers cubic-bezier(x1, y1, x2, y2) are simply the two handle coordinates.
How to use this visualizer
Drag the two coloured handles inside the SVG to shape the curve, or type the four values directly. Pick from 30+ named presets — classics like easeOutCubic, the full Robert Penner set, plus modern UI-toolkit curves (Material, Apple swift-out). The live preview animates a sample shape with your current curve so you feel the timing, not just see the shape. The output panel emits the same easing in three flavors: vanilla CSS cubic-bezier(), GSAP CustomEase, and Framer Motion array tuple — copy whichever your stack uses.
Picking the right curve
Use ease-out curves (handles low-then-high) for entrances — content arrives quickly then settles, which feels responsive. Use ease-in for exits — the eye doesn't need to follow leaving content closely. Use ease-in-out for moves on screen, like a card sliding from one slot to another. Back / overshoot curves (where y2 > 1) add character to playful moments but read as immature on financial or productivity UI. Linear is rarely the right choice for UI animation — it feels mechanical to humans even though it's mathematically uniform.
Frequently asked questions
Why are y values sometimes outside 0–1?
x1 and x2 are clamped to 0–1 by the spec (control points can't move past the timeline ends), but y1 and y2 may go below 0 or above 1. That's how "back" easings work — the value briefly overshoots its target before settling, like a spring bouncing into place.Why does the Material curve fit one set of values and Material 3 another?
(0.4, 0, 0.2, 1) shipped with Material 1 in 2014. Material 3 (2021) introduced a different family based on a custom spring system that doesn't reduce to a single cubic-bezier — what you see here is the closest classic approximation. For exact Material 3 timing, use Google's official tokens.Should I use cubic-bezier or spring physics?
Can I animate this in CSS without JavaScript?
transition-timing-function and animation-timing-function, both of which run on the browser's compositor thread without a single line of JS. The library outputs are only useful if you're already animating with that library — drop the cubic-bezier into the ease field.What's the right duration?
Do these curves work in mobile WebViews?
cubic-bezier() has been in the CSS spec since CSS3 and shipped in every mobile browser by 2013. The animation kinds you see here (transform translate / rotate / scale) are also GPU-composited everywhere, so the preview is representative of production performance.