Cubic Bezier Generator

Drag an easing curve, preview the motion, and copy cubic-bezier() CSS.

Presets:

ease
linear
ease-in
ease-out
ease-in-out
easeInSine
easeOutSine
easeInOutSine
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInExpo
easeOutExpo
easeInOutExpo
easeInBack
easeOutBack
easeInOutBack
time →progress ↑
Drag the red and blue handles. Y values above 1 or below 0 create overshoot (bounce-back) effects.

Example: cubic-bezier(.17,.67,.83,.67) or ease-in-out

Duration: 1000 ms

ease
linear (reference)
CSS transition
.element {
  transition: all 1000ms ease;
}
CSS animation
.element {
  animation-timing-function: ease;
}

Cubic Bezier Generator – CSS Easing Editor

Timing functions decide how an animation accelerates and slows down. This editor lets you shape a cubic-bezier() curve by dragging two handles, type exact numbers, or paste a value you found elsewhere. Two animated boxes run side by side – your curve and plain linear motion – so you can feel the difference before you copy the CSS.

How cubic-bezier() works

A CSS easing curve always starts at (0, 0) and ends at (1, 1). The horizontal axis is time, the vertical axis is progress. You control the two points in between:

transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/*                               x1    y1    x2    y2 */
  • The x values must stay between 0 and 1, because time cannot run backwards.
  • The y values may go below 0 or above 1. That makes the motion overshoot its target and come back – the popular "back" and "elastic" feel.
  • A steep start means a fast start (ease-out); a flat start means a slow start (ease-in).

The summary under the preview tells you how far the animation has moved at the halfway point, which is a quick way to compare curves.

Presets

The five CSS keywords (ease, linear, ease-in, ease-out, ease-in-out) are included, along with the popular sine, quad, cubic, expo, and back curves. When your curve matches a keyword, the generator writes the keyword instead of numbers.

Choosing an easing

  • Entering elements (menus, dialogs, toasts): ease-out curves feel responsive because they start fast.
  • Leaving elements: ease-in, so they accelerate away.
  • Moving between two places on screen: ease-in-out.
  • Playful UI: a back curve with y above 1 – but keep it subtle for frequent interactions.

Respect users who prefer less motion by wrapping long animations in a prefers-reduced-motion media query.

Frequently Asked Questions

The x axis is time. Values outside 0–1 would make time run backwards, so browsers reject them. The y axis (progress) has no such limit.

Drag a handle above the top edge (y greater than 1) or below the bottom edge (y less than 0). The animation then passes its end value and settles back. Try the easeOutBack preset.

Yes. The Web Animations API accepts the same string, e.g. element.animate(frames, { duration: 500, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" }).

ease is cubic-bezier(0.25, 0.1, 0.25, 1): a quick start and a long, gentle slowdown. It is the default for CSS transitions.