CSS Cubic Bezier Generator

A cubic bezier generator for CSS easing

An easing function decides how an animation's progress is spread over its duration: whether it starts slowly, stops gently or overshoots and settles. In CSS the most flexible easing is cubic-bezier(x1, y1, x2, y2). This cubic bezier generator lets you shape that curve by dragging two control points, then plays your curve next to a reference easing so you can feel the difference before you ship it.

How cubic-bezier() works

The curve always starts at (0, 0) and ends at (1, 1). The horizontal axis is time and the vertical axis is progress. The four numbers you edit are the two control points that bend the curve between those ends:

• x1 and x2 must stay between 0 and 1, because time cannot run backwards. The editor clamps them for you.
• y1 and y2 can go outside 0 to 1. Values above 1 make the animation overshoot its end value and come back; values below 0 make it pull back before starting. The graph shows the range from -0.6 to 1.6 so you can drag into both zones, and the status line notes when a curve overshoots.

The five CSS keywords are just named curves:

When your points match one of these, the output uses the keyword instead of the numbers.

Example output

Choosing the easeOutBack preset with a 1-second duration gives:

/* Progress at 50% of the time: 109% */
.element {
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* or for keyframe animations */
.element {
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* reuse as a custom property */
:root {
  --ease-custom: cubic-bezier(0.34, 1.56, 0.64, 1);
}

The first comment is calculated from your curve. Here the element is already 9% past its target halfway through, which is the overshoot that makes "back" easings feel springy. For comparison, the default ease reaches 80% at the halfway point.

Options explained

• Presets include the CSS keywords and the widely used Sine, Quad, Cubic, Quart, Expo, Circ and Back families, each in In, Out and InOut variants.
• Paste a timing function accepts cubic-bezier(.17,.67,.83,.67), four bare numbers, a CSS keyword or a preset name such as easeInOutQuart.
• Duration (0.2 to 4s) sets both the preview speed and the value in the generated transition.
• Compare with picks the curve for the gray reference ball. Comparing against linear shows where your curve is ahead or behind.

Tips for choosing an easing

• Entering elements (menus, toasts, modals) usually feel right with an ease-out curve: fast start, gentle stop.
• Leaving elements suit ease-in, so they accelerate away instead of lingering.
• Elements moving on screen from one place to another usually look natural with ease-in-out.
• Overshoot needs room. Properties with hard limits cannot show it: opacity is clamped at 1, so a back easing on a fade looks the same as a plain ease-out. Use overshoot on transform.
• Keep UI motion short. Most interface transitions sit roughly between 150 and 400ms; longer durations make an interface feel slow however good the curve is.
• Respect reduced motion. Wrap larger movements in a prefers-reduced-motion check.

To use your curve in keyframes, paste it into the custom timing field of the CSS animation generator. For the movement itself, build the values with the CSS transform generator.

Privacy

The curve, preview animation and CSS are all computed in your browser. Nothing is uploaded.