OnSumoTools

Cubic-Bezier Easing Visualizer

This tool lets you design CSS animation timing functions by dragging two control points on a bezier curve graph. The curve determines how an animation progresses over time: a straight diagonal is linear (constant speed), an S-curve starts slow and ends slow, and a steep initial rise means the animation fires quickly and decelerates. Drag the handles, watch a live animation preview, and copy the cubic-bezier() value into your CSS. Everything runs in your browser. No data is sent anywhere.

How does the Cubic-Bezier Easing Visualizer work step by step?

A cubic bezier curve maps time (horizontal axis) to progress (vertical axis). When you apply cubic-bezier(0.4, 0, 0.2, 1) to a CSS transition, the browser calculates the current animation progress at each frame by following the curve. If the curve starts steep, the animation accelerates quickly. If it flattens at the end, it decelerates smoothly.

What does a typical Cubic-Bezier Easing Visualizer result look like?

A springy menu uses P1 at (0.34, 1.56) and P2 at (0.64, 1) so the curve overshoots past 1 on the y-axis, then settles. The preview shows the overshoot before you paste the timing function into CSS.

Frequently asked questions

  • What do the four cubic bezier numbers mean?

    The numbers represent two control points on a curve: (x1, y1) and (x2, y2). The x-values control timing (when acceleration happens), and y-values control progress (how much movement happens). Values outside 0-1 create overshoot or bounce effects.

  • Can I use cubic bezier in JavaScript animations?

    Yes. Most JavaScript animation libraries (GSAP, Framer Motion, Anime.js) accept cubic bezier arrays or CSS syntax. The Web Animations API natively supports cubic-bezier() strings in the easing property. The syntax is identical to CSS.

  • What is the difference between cubic-bezier and steps()?

    Cubic bezier creates smooth, continuous motion by interpolating between keyframes. The steps() function jumps between values without interpolation, creating frame-by-frame effects like sprite animations. Use bezier for smooth transitions and steps for intentionally choppy effects.

  • How do I make an animation bounce at the end?

    Set the second y-value (y2) above 1. For example, cubic-bezier(0.68, -0.55, 0.27, 1.55) produces an overshoot. The higher the value, the more pronounced the bounce. Values above 1.8 usually feel exaggerated.

  • Do all browsers support cubic bezier timing functions in 2026?

    Yes. Cubic bezier has been supported in all major browsers since 2012. No vendor prefixes are needed. The syntax works in transition-timing-function, animation-timing-function, and the Web Animations API easing property.

  • How do I choose the right cubic bezier curve for my animation?

    Start with a preset (ease, ease-in-out) and adjust if it feels wrong. Use ease-out for elements entering the screen, ease-in for elements leaving, and ease-in-out for state changes like hover. Test on real devices—curves that feel smooth on desktop can feel sluggish on slower mobile hardware.

Related tools

Easing is the feel of motion

Two animations with the same duration can feel completely different. One snaps and settles. One drifts and drags. The difference is the easing curve. In CSS you describe it with cubic-bezier(), four numbers that place two control handles on a curve.

This visualizer lets you drag those handles, watch a preview move, and compare ghost curves of the built-in keywords like ease and ease-in-out.

What the four numbers mean

They are x1, y1, x2, y2: the positions of the two handles. The curve always starts at 0,0 and ends at 1,1. The x values must stay between 0 and 1, since x is time. The y values can go outside that range, which makes the motion overshoot.

A steep start means fast at first. A flat end means a gentle landing. Read the curve like a speed graph.

Picking a curve

Ease-out feels natural for things entering. They arrive quickly and slow down to rest. Ease-in suits things leaving. Ease-in-out suits movement across the screen. Linear is rarely right except for spinners and progress bars.

For 150 to 300 milliseconds, subtle curves work. Strong curves need longer durations to read.

Bounce and overshoot

To make something bounce at the end, push y2 above 1. A value like cubic-bezier(0.34, 1.56, 0.64, 1) overshoots and settles. A single cubic can't produce multiple bounces. For that, use keyframes with several stops.

cubic-bezier or steps

cubic-bezier is smooth. steps() jumps in discrete frames, good for sprite sheets and typing effects. Pick based on whether you want continuous or choppy movement.

Use anywhere

The same four numbers work in JavaScript animation libraries, the Web Animations API and CSS transitions. All current browsers support them.

Respect reduced-motion settings. Your curves stay in your browser.

How the curve works

A cubic-bezier easing has four numbers: two control points. The curve maps time on the horizontal axis to progress on the vertical. A straight diagonal is linear. A curve that starts flat and ends steep eases in. One that starts steep and flattens eases out.

Push a control point above 1 or below 0 and you get overshoot, where the element goes past its target and settles back. It gives a springy feel when used lightly.

Drag the two handles and watch the preview move.

Picking easing on purpose

Entering elements feel natural with ease-out, since they arrive quickly and settle. Leaving elements suit ease-in. Movement across the screen often looks best with ease-in-out.

Keep durations short for interface changes, 150 to 300 ms. Bigger moves can take more. And don't use bouncy overshoot on serious screens like payments.

Reading the curve

The curve shows progress over time. A steep start means fast motion at the beginning. A flat end means a gentle landing. Points above 1 or below 0 on the vertical axis create overshoot and bounce.

Some presets to try: ease-out is cubic-bezier(0, 0, 0.2, 1) for entering elements, ease-in is (0.4, 0, 1, 1) for exits, and (0.4, 0, 0.2, 1) is a balanced standard curve.

Match the duration to the distance. Short movements want 150 milliseconds. Full-screen changes can take 300 to 400.

Use the same two or three curves across the whole product, so motion feels like one language. Random curves feel noisy even if each one looks fine alone.