Cubic Bezier Generator

Create custom CSS cubic-bezier() easing curves with this free online generator.
Drag the two control points to adjust the acceleration and deceleration while viewing the curve in real time.
Preview the motion and copy the generated cubic-bezier() value directly into your CSS.

How to Use the Cubic Bezier Generator

1. Choose a preset

Start by selecting a preset that is close to the motion you want to create.

In addition to CSS standards such as Ease, Ease In, Ease Out, and Ease In Out, the generator includes distinctive Expo and Back easing presets.

Selecting a preset immediately updates the curve, control points, and animation preview.

2. Adjust the control points

Drag the two control points in the curve editor to adjust the easing curve.

You can also enter X1, Y1, X2, and Y2 directly for precise control.

The horizontal axis represents elapsed time, while the vertical axis represents animation progress.

3. Preview the motion

Click “Replay” to preview the current settings as an animation.

Choose an easing under “Compare With” to play the current settings alongside Linear, Ease, or another standard easing and compare the motion.

Set the duration from 100 to 5000 ms to check how the easing feels in both fast and slow animations.

4. Copy the generated value

The generator automatically creates a cubic-bezier() value from your settings.

Choose “Value,” “Transition,” or “Animation,” then use the copy button to copy the format you need into your project.

Use the “Reset” button to restore the initial settings.

What Is cubic-bezier?

cubic-bezier() is a CSS easing function that gives you precise control over changes in speed during transitions and animations.

It can create motion that gradually accelerates from a slow start, begins quickly and eases into a stop, or follows many other timing patterns.

A cubic-bezier() function contains four values:

cubic-bezier(x1, y1, x2, y2)

For example, the CSS ease keyword corresponds to:

cubic-bezier(0.25, 0.1, 0.25, 1)

The curve has four points: a start point P0, two control points P1 and P2, and an end point P3.

P0 is fixed at (0, 0) and P3 at (1, 1), so you adjust only the coordinates of P1 and P2.

P1 = (x1, y1)
P2 = (x2, y2)

The X axis represents time and the Y axis represents animation progress.

X1 and X2 must be between 0 and 1, but Y1 and Y2 may be negative or greater than 1.

Y values outside 0 to 1 can make the animation briefly move before its start value or overshoot its end value before returning.

FAQ

Where can I use cubic-bezier()?

Use it in CSS properties that accept an easing function, particularly transition-timing-function and animation-timing-function.

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

You can also use it in the transition and animation shorthand properties.

Can X1 or X2 be outside the 0–1 range?

No. X1 and X2 must be between 0 and 1; otherwise, the function is not a valid CSS easing value.
This generator clamps out-of-range X input to the valid range.

Can Y1 or Y2 be outside the 0–1 range?

Yes. Negative Y values can make the animation move briefly in the opposite direction before progressing, while values above 1 can create an overshoot past the end position.

How do Ease, Ease In, Ease Out, and Ease In Out differ?

Ease: starts slowly, accelerates, then slows to a stop.
Ease In: starts slowly and gradually accelerates.
Ease Out: starts quickly and decelerates toward the end.
Ease In Out: starts slowly, accelerates, then decelerates again.
Linear: moves at a constant rate from start to finish.

If you are unsure, switch between presets and compare them in the animation preview.

Are Back Out and Ease Out Expo standard CSS easing keywords?

No. Standard CSS keywords include linear, ease, ease-in, ease-out, and ease-in-out.
Back and Expo are commonly used names for distinctive custom easing curves. This generator provides them as cubic-bezier() presets.

Does changing the preview duration change cubic-bezier()?

No. Duration controls how long the whole animation takes, while cubic-bezier() controls how it accelerates and decelerates within that time.
The same easing can feel different at different durations, so preview it close to the duration you plan to use.

Can cubic-bezier() create a bouncing animation?

It can create a single overshoot that passes the end position and returns.
A single cubic-bezier() cannot create several repeated bounces. Use @keyframes or another technique for more complex bouncing motion.

Can I use the generated value with both transition and animation?

Yes. It works with both transition and animation.
The function defines only the pacing; you still need to specify the animated property, duration, and start and end states.

What do the X and Y axes represent?

The X axis represents elapsed time and the Y axis represents animation progress.
(0, 0) is the start and (1, 1) is the end. The curve shows how far the animation has progressed at each point in time.

Why does the animation briefly pass its start or end position?

This happens when Y1 or Y2 is below 0 or above 1. Those values let progress move temporarily outside the normal range.
If this is unintended, move Y1 and Y2 closer to the 0–1 range.

Is cubic-bezier() supported by major browsers?

Yes. cubic-bezier() is widely supported by current major browsers for transitions and animations on websites and web applications.

Can this generator create an entire CSS animation?

This tool focuses on generating the cubic-bezier() function that controls pacing.
Define the element, animated properties, duration, and start and end states separately in your CSS.

Which easing should I use?

Start with a preset close to your use case. In many interfaces, Ease Out works well for elements entering, Ease In for elements leaving, and Ease In Out for movement between positions.
Check the animation preview and fine-tune the control points as needed.

Control Points