All tools

Cubic Bezier Editor

Visual editor for CSS easing curves.

cubic-bezier(0.25, 0.10, 0.25, 1.00)

About

Drag the two control points to shape an easing curve and see a sample animation play with it. Useful for designing custom motion that's snappier or smoother than the built-in ease functions. Copies as cubic-bezier() ready to paste into CSS.

How to use

  1. Drag the two control points.
  2. Watch the preview animation.
  3. Copy the cubic-bezier() value.

FAQ

What's a good default?+

cubic-bezier(0.4, 0.0, 0.2, 1) is Material Design's standard. Snappy on enter, gentle on exit. Good baseline for most UI motion.