Cubic Bezier Generator

Why You Are Here

Animation timing is the difference between an interface that feels considered and one that feels cheap. The duration matters, but the easing curve, how the motion accelerates and decelerates, is what people actually perceive as quality, even though almost nobody could name it.

The problem is that cubic-bezier(0.34, 1.56, 0.64, 1) tells you nothing by looking at it. Four decimals do not communicate motion. You have to see the curve and watch it play.

The first situation is that the built-in keywords are not enough. CSS gives you ease, ease-in, ease-out, ease-in-out, and linear. They are fine, but they are also the defaults everyone else uses, and ease in particular has a slightly dated, sluggish feel. A custom curve is how an interface develops a motion character of its own.

The second is design handoff. A motion designer specifies easing in After Effects or Figma, and you need the equivalent cubic-bezier() values to reproduce that feel in CSS rather than approximating by eye.

The third is simply learning. Dragging the handles and watching the animation respond teaches you how bezier curves work far faster than reading about control points.

What This Tool Does

The Cubic Bezier Generator gives you a visual curve editor with two draggable control points and a live animation preview.

Drag the handles to reshape the curve, or type exact coordinate values if you are matching a specification. The preview animation replays as you adjust, so you can feel the difference rather than guessing from numbers. Start from a preset if you want a known-good curve as a base.

When the motion feels right, copy the cubic-bezier() value into your stylesheet.

How Cubic Bezier Easing Works

A cubic bezier curve maps TIME (horizontal axis) to PROGRESS (vertical axis). The animation always starts at (0,0) and ends at (1,1). Those two points are fixed. What you control is the two points in between.

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

/* x1, y1 = first control point, governs how the animation begins
   x2, y2 = second control point, governs how it ends */

Reading the curve is straightforward once you know what to look for. Where the curve is STEEP, progress is changing quickly, so the animation is moving fast. Where it is SHALLOW, the animation is slow. A curve that starts shallow and ends steep accelerates. One that starts steep and ends shallow decelerates.

The rule that catches everyone

CSS Keyword Equivalents

Every built-in easing keyword is a cubic bezier underneath. These are exact.

Preset Curve Reference

Approximate cubic-bezier() equivalents for the standard easing families. These are the values used across most animation libraries.

Material Design curves

Choosing Easing and Duration Together

A well-shaped curve at the wrong duration still feels wrong. These two decisions are inseparable, and the pairing below covers most interface work.

What Cubic Bezier Cannot Do

This is worth being precise about, because several easing tools list bounce and elastic presets that do not do what their names suggest.

Option one: keyframes

@keyframes bounce {
  0%   { transform: translateY(-100px); }
  50%  { transform: translateY(0); }
  70%  { transform: translateY(-20px); }
  85%  { transform: translateY(0); }
  92%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

Option two: the linear() function

This is the modern approach. It accepts an arbitrary list of progress stops, so it can describe oscillation that cubic-bezier() cannot.

transition-timing-function: linear(
  0, 0.25, 0.6, 0.9, 1, 0.95, 1
);

/* linear() is supported in current versions of Chrome, Firefox,
   Safari, and Edge. If you support older browsers, declare a
   cubic-bezier() fallback before it. */

Accessibility — Respecting Reduced Motion

Almost no easing tool mentions this, and it matters more than the curve you choose.

Some people experience genuine nausea, dizziness, or migraine from interface motion, particularly large movement, parallax, and zoom effects. Operating systems expose a reduce motion setting for exactly this reason, and CSS can read it.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Common Mistakes to Avoid

Quick Reference