Cubic Bezier Generator

Visual curve editor for creating custom CSS transition-timing-function easing curves.

Curve controls

Presets

x1 — 0.25

y1 — 0.1

x2 — 0.25

y2 — 1

cubic-bezier(0.25, 0.1, 0.25, 1)

.eased {
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}