Cubic Bezier Visualizer

What is a cubic-bezier easing curve?

When something moves on screen, whether a menu sliding in, a button scaling on hover, or a modal fading up, the movement is rarely linear. Instead, it eases: it starts slowly, speeds up, slows down, or overshoots, and the shape of that acceleration is described by an easing curve. In CSS, the most flexible way to define an easing curve is the cubic-bezier function, which takes four numbers representing two control points of a cubic Bezier curve. The curve maps time, on the horizontal axis, to progress, on the vertical axis, so a steep section means fast movement and a flat section means slow movement. A curve that rises quickly at the start and flattens at the end feels snappy and then gentle, while a curve that stays flat and then rises sharply feels delayed and then sudden, and choosing between them is a design decision with real consequences for how an interface feels.

The four numbers in cubic-bezier are the x and y coordinates of two control points, while the start point is fixed at zero, zero and the end point at one, one. The x coordinates must lie between zero and one, because time only moves forward, but the y coordinates may go outside that range, which produces overshoot and anticipation effects where an element briefly moves past its target or pulls back before moving forward. The predefined keywords you already know are just shortcuts for specific curves: ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is cubic-bezier(0.42, 0, 1, 1), ease-out is cubic-bezier(0, 0, 0.58, 1), and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1). Linear is cubic-bezier(0, 0, 1, 1), a straight diagonal line meaning constant speed, which is correct for some things, such as a progress bar, but feels mechanical for most interface motion.

How BezierLab works

BezierLab lets you set the two control points with numbers, draws the resulting curve as an SVG path, and animates a dot along it so you can feel the easing rather than just imagining it. The presets give you the four classic curves with one tap, and the result reports the progress values at twenty-five and fifty percent of the duration, which are useful numbers for comparing curves: a curve whose progress at fifty percent is well above 0.5 is front-loaded and feels fast early, while one below 0.5 feels slow to start. The copy-ready CSS snippet uses the transition-timing-function property, which you can paste into any transition or animation, and the same four numbers work in animation-timing-function and in most design tools, so a curve tuned here transfers directly to your project.

The progress calculation behind the result solves the curve properly: for a given fraction of elapsed time, it finds the curve parameter whose horizontal coordinate equals that fraction, by repeated bisection, and then evaluates the vertical coordinate at that parameter. At zero elapsed time the progress is zero, at full time it is one, and in between it follows the curve's shape, which is why the ease curve is already at 0.8024 progress halfway through its duration, well ahead of linear, while its progress at a quarter of the way is 0.4085, showing a gentle start followed by a brisk middle. The visualiser draws the same curve geometrically, so the numbers and the picture always agree.

Choosing an easing curve for interface motion

Most interface motion should use ease-out, where the movement starts fast and decelerates into place, because it feels responsive: the element reacts immediately to the user's action and then settles gently, which reads as polished rather than sluggish. Elements entering the screen, such as menus, drawers, and dialogs, usually suit ease-out or a custom curve with a slightly overshooting y value, which adds a hint of liveliness without looking bouncy. Elements leaving the screen usually suit ease-in, accelerating away, because the user is already done with them and does not need a gentle landing. Elements that move within the screen, such as a dragged card snapping to a grid, suit ease-in-out, which is symmetrical and feels balanced for a journey that starts and ends at rest.

Duration and easing must be chosen together. A short duration of 150 to 250 milliseconds with ease-out feels crisp for hovers and small state changes, while a longer duration of 300 to 500 milliseconds suits larger movements such as panels and page transitions, and anything over a second starts to feel slow unless it is a deliberate, large-scale animation. A curve that feels perfect at 300 milliseconds can feel frantic at 150 or lethargic at 800, so always test the combination, not the curve alone. The animated dot in BezierLab runs at a fixed 1.2 seconds to make the shape easy to read, which exaggerates the feel compared with a real 250 millisecond transition, so use it to compare shapes and then verify the final choice at your real duration in the browser.

Reading a curve at a glance

A curve's shape tells you its personality before you run it. A curve that rises steeply on the left and flattens on the right is ease-out: fast start, gentle finish. A curve that stays flat on the left and rises steeply on the right is ease-in: slow start, fast finish. A curve that is flat at both ends and steep in the middle is ease-in-out: gentle start and finish with a brisk middle. A straight diagonal is linear: constant speed, appropriate for mechanical motion such as scrolling indicators and indeterminate progress, but lifeless for most interface elements. A curve that dips below the axis at the start shows anticipation, pulling back before moving forward, and a curve that rises above the top before settling shows overshoot, briefly passing the target, both of which add character when used sparingly and look gimmicky when overused.

Control point positions give you finer control than these archetypes. Moving the first control point to the right delays the start, because the curve stays flat longer, while moving it up accelerates the start. Moving the second control point to the left brings the finish earlier, while moving it up past one creates overshoot. Small adjustments, such as changing a y value by 0.1, produce subtle differences that are often more appropriate for production interfaces than dramatic curves, which draw attention to the animation itself rather than to the content. When in doubt, start from ease-out and adjust one control point at a time, testing after each change, rather than inventing a curve from scratch.

Easing, accessibility, and motion sensitivity

Motion is not purely aesthetic: some users experience vestibular disorders, migraines, or motion sensitivity, and large, fast, or unexpected animations can cause real discomfort. Respect the prefers-reduced-motion media query by reducing or removing non-essential animation for users who request it, and keep essential motion short, small, and predictable. Avoid animations that simulate depth, spinning, or parallax for large areas of the screen, and never animate an element in a way that could be mistaken for a system warning or a flashing pattern. Overshoot and bounce effects are particularly worth restraining, because the repeated direction changes are more stimulating than a simple ease, and a calm ease-out is almost always the safer default.

Performance matters too. Animate only transform and opacity where possible, because those properties can be handled by the compositor without repainting the page, while animating width, height, margins, or top and left forces layout recalculation on every frame and can stutter on modest devices. A beautiful curve applied to a layout property will still feel bad if the frame rate drops, so choose cheap properties first and then tune the curve. The cubic-bezier function itself costs nothing extra: it is evaluated by the browser's animation engine, and a custom curve is no more expensive than a keyword, so there is no performance reason to avoid custom easing.

Common easing mistakes

The most common mistake is using the default ease for everything, which is acceptable but bland, and which makes every movement in an interface feel identical, so nothing stands out. The second is using linear for interface motion, which feels robotic and makes even well-designed elements seem cheap. The third is using ease-in for elements entering the screen, which makes the interface feel unresponsive, because nothing appears to happen in the first moments after the user's action. The fourth is overusing bounce and elastic curves, which delight once and distract forever. The fifth is mismatching duration and curve, such as pairing a dramatic overshoot with a long duration, which turns a flourish into a wait. Each mistake is fixed by the same discipline: pick a purpose for the motion, choose the curve family that serves it, and test at real duration on a real device.

• Use ease-out for entering elements and ease-in for exiting ones.
• Keep durations short: 150 to 250 ms for small changes, 300 to 500 ms for panels.
• Animate transform and opacity only, for smooth frame rates.
• Respect prefers-reduced-motion and keep motion small and predictable.
• Start from a classic curve and adjust one control point at a time.

A well-chosen easing curve is invisible in the best way: users feel that the interface is responsive and polished without ever noticing the animation itself. Visualize it, preview it, and copy the exact numbers, and your motion will feel intentional rather than accidental.