What are the four numbers in `cubic-bezier(x1, y1, x2, y2)`?

These four numbers represent the x and y coordinates of the two control points (P1 and P2) that define the shape of the cubic Bezier curve. P1 is (x1, y1) and P2 is (x2, y2).

What is the valid range for cubic-bezier control point coordinates?

The x-coordinates (x1, x2) must be between 0 and 1. The y-coordinates (y1, y2) can be outside the 0 to 1 range, allowing for 'bouncy' or 'overshoot' effects in animations.

How does `cubic-bezier` compare to `ease`, `linear`, `ease-in`, `ease-out`?

Keywords like `ease` are predefined `cubic-bezier` functions. `ease` is `cubic-bezier(0.25, 0.1, 0.25, 1)`, `linear` is `cubic-bezier(0, 0, 1, 1)`, `ease-in` is `cubic-bezier(0.42, 0, 1, 1)`, and `ease-out` is `cubic-bezier(0, 0, 0.58, 1)`.

Can I create a 'bounce' effect with `cubic-bezier`?

Yes, by setting the y-coordinates of your control points outside the 0-1 range (e.g., P1y 1), you can create curves that cause an element to temporarily move beyond its final position, simulating a bounce.

Does the order of control points matter?

Yes, the order is fixed: `cubic-bezier(P1x, P1y, P2x, P2y)`. Swapping P1 and P2 coordinates will result in a different curve and animation timing.

Where do I apply the generated `cubic-bezier` function?

You apply it as the value for the `transition-timing-function` property in CSS transitions or the `animation-timing-function` property in CSS animations.

Cubic Bezier Generator

Cubic Bezier Generator Overview

Visual cubic-bezier easing generator

A Cubic Bezier Generator is an online utility that allows users to visually design and generate custom `cubic-bezier()` timing functions for CSS transitions and animations. These functions define the acceleration curve of an animation, controlling how its speed changes over its duration. Instead of relying on predefined keywords like `ease` or `linear`, a cubic-bezier function provides granular control over the animation's progression from start to finish. The tool operates by presenting a graphical representation of a cubic Bezier curve, typically within a 2D coordinate system ranging from (0,0) to (1,1). Users can manipulate two control points (P1 and P2) that influence the shape of the curve. As these points are adjusted, the tool dynamically calculates the four numerical parameters (x1, y1, x2, y2) required for the `cubic-bezier(x1, y1, x2, y2)` CSS function. A live preview often demonstrates how the chosen curve affects an example animation, such as a moving box. Web developers, UI/UX designers, and animators use this tool to create unique and expressive motion for their web elements. It is particularly useful for achieving specific animation feels, such as a bouncy effect, a slow start followed by a fast finish, or a subtle acceleration. The generator simplifies the creation of custom easing curves, eliminating the need for manual trial-and-error with numerical values and providing immediate visual feedback.

How to Use Cubic Bezier Generator

Locate the two control points (P1 and P2) on the interactive Bezier curve graph.
Drag and move these control points to shape the curve according to your desired animation timing.
Observe the live preview animation to see the effect of your custom curve.
Adjust the control points until the animation timing matches your visual requirements.
Copy the generated `cubic-bezier(x1, y1, x2, y2)` CSS function to your clipboard.

Frequently Asked Questions

What are the four numbers in `cubic-bezier(x1, y1, x2, y2)`?: These four numbers represent the x and y coordinates of the two control points (P1 and P2) that define the shape of the cubic Bezier curve. P1 is (x1, y1) and P2 is (x2, y2).
What is the valid range for cubic-bezier control point coordinates?: The x-coordinates (x1, x2) must be between 0 and 1. The y-coordinates (y1, y2) can be outside the 0 to 1 range, allowing for 'bouncy' or 'overshoot' effects in animations.
How does `cubic-bezier` compare to `ease`, `linear`, `ease-in`, `ease-out`?: Keywords like `ease` are predefined `cubic-bezier` functions. `ease` is `cubic-bezier(0.25, 0.1, 0.25, 1)`, `linear` is `cubic-bezier(0, 0, 1, 1)`, `ease-in` is `cubic-bezier(0.42, 0, 1, 1)`, and `ease-out` is `cubic-bezier(0, 0, 0.58, 1)`.
Can I create a 'bounce' effect with `cubic-bezier`?: Yes, by setting the y-coordinates of your control points outside the 0-1 range (e.g., P1y < 0 or P2y > 1), you can create curves that cause an element to temporarily move beyond its final position, simulating a bounce.
Does the order of control points matter?: Yes, the order is fixed: `cubic-bezier(P1x, P1y, P2x, P2y)`. Swapping P1 and P2 coordinates will result in a different curve and animation timing.
Where do I apply the generated `cubic-bezier` function?: You apply it as the value for the `transition-timing-function` property in CSS transitions or the `animation-timing-function` property in CSS animations.

Related Design Tools

Color Contrast Checker - Check WCAG accessibility contrast
SVG Pattern Generator - Create seamless background patterns
Flexbox Generator - Visual CSS Flexbox builder
SVG Blob Generator - Create extensive unique SVG blobs
Fancy Border Radius - Generate advanced CSS border-radius shapes
CSS Filter Generator - Visual editor for CSS image filters
CSS Transform Generator - 2D/3D CSS Transform builder
CSS Keyframe Gen - Create CSS animations visually