Axes: x = time (0→1), y = progress (0→1). The control points are P1(x1, y1) and P2(x2, y2). The values are limited to [0,1].

Tip: Double-click inside the square to place the nearest handle at that position.

Control points (x1, y1, x2, y2)

Presets

ease linear ease-in ease-out ease-in-out easeInSine easeOutSine easeInOutSine easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic

Animation preview options

Duration (s)

Delay (s)

Iterations

Generated code

CSS Cubic Bezier Generator

Understanding CSS Cubic Bezier Curves

CSS cubic-bezier() is a powerful timing function used to control the pace of CSS transitions and animations. It allows designers and developers to define custom easing curves, creating more natural and expressive motion effects. Instead of relying on preset keywords like ease, linear, ease-in, or ease-out, the cubic-bezier() function provides full control over acceleration and deceleration throughout an animation.

How Cubic Bezier Works

A cubic Bezier curve is defined by four points:

P0: The starting point (always at coordinates (0, 0))
P1: The first control point, which determines the initial slope of the curve
P2: The second control point, which determines how the curve approaches the end point
P3: The end point (always at coordinates (1, 1))

In CSS, the syntax is written as:

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

Each control point (P1 and P2) has two coordinates: x and y. The x values must be between 0 and 1, representing the time progression of the animation, while the y values represent the progress of the animated property, which can be less than 0 or greater than 1 for effects like overshooting or bouncing.

Visualizing the Bezier Curve

Imagine a graph where the X-axis represents time (from 0 to 1) and the Y-axis represents the completion percentage of an animation (also from 0 to 1). The line starts at (0,0) and ends at (1,1), but the path between those points is determined by how you position P1 and P2. For example:

cubic-bezier(0, 0, 1, 1) produces a straight line — equivalent to linear.
cubic-bezier(0.42, 0, 1.0, 1.0) corresponds to ease-in.
cubic-bezier(0, 0, 0.58, 1.0) corresponds to ease-out.
cubic-bezier(0.42, 0, 0.58, 1.0) corresponds to ease.

By adjusting these four values, you can fine-tune how quickly or slowly an animation starts and ends, or even create effects like "elastic" movement or "anticipation".

Practical Example

Here’s an example of using cubic-bezier() in a CSS transition:

.button {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.button:hover {
  transform: scale(1.1);
}

In this example, the y values extend beyond the normal range, creating a bouncy or "overshoot" effect when hovering over the button.

Custom Bezier Curves in Practice

Designers often experiment with different cubic-bezier curves to achieve unique motion styles:

Soft ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1.0)
Sharp snap: cubic-bezier(0.8, 0, 0.2, 1)
Bounce-like: cubic-bezier(0.68, -0.55, 0.27, 1.55)
Slow start, quick end: cubic-bezier(0.1, 0.7, 1.0, 0.1)

This tool lets you to visually design and preview your custom Bezier curve - simply drag the two control points (P1 and P2) to see how your curve behaves. Once you’re satisfied, you can copy the generated function and paste it into your CSS.

Tips for Perfect Control

Keep x1 and x2 between 0 and 1 - this ensures a valid progression through time.
y1 and y2 can go beyond [0,1] - for more dynamic effects like bouncing or anticipation.
Use visualization tools to better understand how your curve behaves.
Combine with delays and durations for complex animation sequences.

Conclusion

CSS cubic-bezier() functions open up endless possibilities for animation control, letting you craft transitions that feel natural, snappy, or entirely unique. Whether you're designing smooth UI interactions or playful motion effects, mastering cubic Bezier curves is an essential step toward professional-grade web animations.

Last update: 16. 10. 2025.