CSS Easing Function Picker

Pick a cubic-bezier curve for CSS animations and transitions. Drag the two control points to shape the curve, or load a Material/iOS preset. The animation preview shows how the curve feels in motion.

Presets

How to use the CSS Easing Function Picker

Drag the sliders or click a preset. The SVG shows the curve, the ball animates back and forth using the chosen easing. The output is a ready-to-paste cubic-bezier(...) value for any CSS transition or animation.

Shaping motion with cubic-bezier

Easing is what separates motion that feels mechanical from motion that feels natural. CSS expresses it as a cubic-bezier() curve with two control points: the curve maps elapsed time to progress, so a steep start means a fast launch and a gentle tail means a soft landing. Control-point values are unintuitive as bare numbers, which is why dragging the curve and watching a preview beats guessing.

Drag the two handles or load a Material or iOS preset, watch the ball replay the timing, and copy the cubic-bezier() value. Note that a control point past the 0–1 range produces overshoot, the springy “back” effect. Paste the result into any transition, or into the animation generator to drive a full @keyframes sequence.

Common use cases

  • Natural transitions — ease UI changes so they feel less abrupt.
  • Overshoot effects — add a springy back-out to a popping element.
  • Material and iOS motion — match platform-standard easing curves.
  • Tuning feel — compare accelerate versus decelerate on the same move.
  • Animation timing — supply a custom curve to a keyframe animation.

Frequently asked questions

What do the two control points mean?
They bend the timing curve between start and end. A low first point eases in slowly; a high second point eases out gently.

How do I get a bounce or overshoot?
Drag a control point above 1 or below 0 so the curve overshoots, like the back-out preset, which springs past the target and settles.

Where can I use the value?
In any CSS transition or animation timing-function, including the animation generator.

What is the default CSS easing?
The keyword ease, which is the cubic-bezier(0.25, 0.1, 0.25, 1) preset included here.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: