CSS Cubic Bezier Generator

Drag the two handles to shape an easing curve, watch a dot ride it against a steady one, and copy the cubic-bezier() value.

Presets
Control points
First control point
Second control point
Preview
your curve
linear
Value
cubic-bezier(0.25, 0.1, 0.25, 1)
Drag a handle or pick a preset to shape the curve.

The curve is drawn right in your browser. Nothing you set here is uploaded to BroBroGo.

FAQ

What do the two handles and four numbers mean?

The curve runs from bottom-left (the start) to top-right (the end), with time going left to right and progress going up. The two handles are the control points that bend it — each has an X and a Y, so together they are cubic-bezier(x1, y1, x2, y2). X stays between 0 and 1, while Y can go above the top or below the bottom to make the motion overshoot or pull back before it settles.

How do I use the value in my CSS?

Copy the cubic-bezier() and drop it wherever a timing function goes — transition-timing-function, animation-timing-function, or the shorthand, e.g. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). The keywords ease, ease-in, ease-out and ease-in-out are just fixed cubic-bezier curves, so picking one of those presets shows you the exact value behind the keyword.

Can it make a bounce or elastic effect?

Not on its own. A single cubic-bezier can anticipate and overshoot — the “back” presets pull one handle past the box to do exactly that — but it can only move one way and then settle. Bounce and elastic reverse direction several times, which no single cubic-bezier can express; those need CSS keyframes or the linear() function with many stops.

Written and reviewed by the BroBroGo editorial team.Last updated:

Understanding CSS Timing Functions and Cubic Bezier Curves

In CSS transitions and animations, timing functions dictate how the speed of an animation changes over its duration. By default, CSS provides standard keywords such as ease, ease-in, ease-out, and ease-in-out. These keywords are aliases for specific cubic Bezier curves.

A cubic Bezier curve is a mathematical curve defined by four points. The first point is fixed at the bottom-left corner (representing the start of the animation at time 0, progress 0), and the fourth point is fixed at the top-right corner (representing the end of the animation at time 1, progress 1). The shape of the curve is determined by two intermediate control points, which you can manipulate to alter the acceleration and deceleration of the transition.

The CSS cubic-bezier(x1, y1, x2, y2) function accepts four numerical parameters representing the coordinates of these two control points:

  • x1 and y1 define the coordinates of the First control point.
  • x2 and y2 define the coordinates of the Second control point.

Time progresses along the horizontal X-axis from left to right (0 to 1), while animation progress is mapped along the vertical Y-axis (0 to 1). By adjusting these coordinates, you can create custom easing profiles that go far beyond the standard CSS keywords.

How to Use the Generator

The CSS Cubic Bezier Generator provides a visual interface to design, preview, and export custom easing curves.

Adjusting the Control Points

You can shape the curve using two primary methods:

  1. Visual Dragging: Drag the two handles directly on the coordinate space to bend the curve.
  2. Manual Input: Enter precise numerical values into the input fields for the control points.
    • First control point X and Second control point X accept values strictly between 0 and 1.
    • First control point Y and Second control point Y accept values between -0.70 and 1.70.

Input Validation Rules

The generator enforces strict validation rules to ensure the output is always valid CSS:

  • If you enter an out-of-bounds value, such as 9 for an X coordinate, and then lose focus from the input field, the value automatically clamps to the maximum limit of 1.
  • If you clear a numerical input field entirely and lose focus, the tool restores the previous valid value.
  • Empty or non-numeric inputs will wait for a complete value before updating the curve.
  • For fine adjustments, you can select a control point handle and press the Left arrow key to decrement its value (for example, changing a value to 0.99).

Selecting Presets

The tool includes a Presets section containing standard CSS timing functions and advanced motion profiles:

  • Standard presets: ease, ease-in, ease-out, and ease-in-out.
  • Advanced presets: Back In, Back Out, and Back In-Out.
  • Selecting the Back Out preset automatically configures the curve to cubic-bezier(0.34, 1.56, 0.64, 1).

Visualizing and Exporting the Easing Curve

As you modify the control points, the tool provides real-time visual feedback:

  • your curve: A visual representation of the easing curve is drawn directly on the screen.
  • Motion Preview: A dot moves along your custom curve, demonstrating the easing effect side-by-side with a reference dot moving at a steady, linear pace.
  • CSS Output: The tool displays the exact CSS value under the Value heading, formatted as cubic-bezier(x1, y1, x2, y2).

Once you are satisfied with the motion, you can copy the generated value. Upon a successful copy action, the tool displays the status Copied. There are no explicit rejection or failure prompts for the copy action.

Achieving Overshoot and Pull-Back Effects

One of the primary advantages of using custom cubic Bezier curves over standard easing keywords is the ability to create anticipation (pull-back) and overshoot effects.

While the X-axis (time) is strictly limited to the range 0 to 1, the Y-axis (progress) can extend beyond these boundaries. The generator allows Y-coordinate inputs to range from -0.70 to 1.70:

  • Anticipation (Pull-back): Setting a Y-value below 0 (down to -0.70) pulls the animation progress backward into negative values before progressing forward. This creates a "wind-up" or preparatory movement.
  • Overshoot: Setting a Y-value above 1 (up to 1.70) forces the animation progress to exceed its final destination before snapping back to the end state. This is ideal for creating springy, organic transitions.

Technical Limitations of Cubic Bezier Curves

While cubic-bezier() is highly versatile, it has inherent mathematical limitations. A single cubic Bezier curve can only progress from start to finish with a maximum of one anticipation phase and one overshoot phase. It can only move one way and then settle; it cannot express complex, multi-phase physical behaviors.

If your design requires effects that reverse direction multiple times—such as a bouncing ball that hits the floor repeatedly, or a highly elastic spring that oscillates back and forth—a single cubic-bezier() function cannot achieve this. For those complex animations, you must use alternative CSS methods, such as multi-stage CSS @keyframes or the CSS linear() timing function with multiple control stops.

Privacy and Data Processing

The CSS Cubic Bezier Generator operates entirely client-side. The curve is drawn right in your browser, and all coordinate calculations, input validations, and animation previews are processed locally on your device. Nothing you set here is uploaded to BroBroGo.

Frequently Asked Questions

What do the two handles and four numbers mean?

The curve runs from bottom-left (the start) to top-right (the end), with time going left to right and progress going up. The two handles are the control points that bend it — each has an X and a Y, so together they are cubic-bezier(x1, y1, x2, y2). X stays between 0 and 1, while Y can go above the top or below the bottom to make the motion overshoot or pull back before it settles.

How do I use the value in my CSS?

Copy the cubic-bezier() and drop it wherever a timing function goes — transition-timing-function, animation-timing-function, or the shorthand, e.g. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). The keywords ease, ease-in, ease-out and ease-in-out are just fixed cubic-bezier curves, so picking one of those presets shows you the exact value behind the keyword.

Can it make a bounce or elastic effect?

Not on its own. A single cubic-bezier can anticipate and overshoot — the “back” presets pull one handle past the box to do exactly that — but it can only move one way and then settle. Bounce and elastic reverse direction several times, which no single cubic-bezier can express; those need CSS keyframes or the linear() function with many stops.

Gradient GeneratorBuild a linear, radial, or conic gradient, add color stops and set the direction, then copy the CSS in one click.Border Radius GeneratorRound each corner with sliders, shape organic blobs with the elliptical mode, and copy the CSS instantly.Flexbox GeneratorSet up a flex container and its items with visual controls, watch the layout react live, and copy the CSS in one click.CSS Grid GeneratorSet your columns and rows, drag across the cells to place items, and copy the grid CSS with matching HTML in one click.Box Shadow GeneratorDrag sliders to shape a box-shadow, stack layers for depth, and copy the finished CSS instantly.CSS clamp() CalculatorEnter a size for small and large screens and get a fluid clamp() value that scales smoothly in between — for font sizes, padding, margins or gaps.