← Home
中文

cubic-bezier Editor

Drag control points to design CSS easing curves

Live preview
ease
linear
ease-in
ease-out
ease-in-out
back
material standard
material accelerate
material decelerate
overshoot
cubic-bezier(0.25, 0.1, 0.25, 1)

How to use

  • Drag the pink and purple control point handles in the curve to shape the easing
  • Or edit x1/y1/x2/y2 values directly (typically 0-1, but y can go outside for overshoot/anticipation)
  • Click "Play" to preview the animation, adjust duration to taste
  • Click the cubic-bezier() code at the bottom to copy

Tips

  • x must be 0-1 (time progression); y can be negative or > 1 (overshoot)
  • Material Design's cubic-bezier(0.4, 0, 0.2, 1) is the most-used "natural" curve
  • For UI: ease-out for elements entering, ease-in for exiting