Developer Tools toolsUpdated July 2026

Free CSS Cubic-Bezier / Easing Curve Generator

Visually design a CSS cubic-bezier easing curve and preview the animation, directly in your browser.

Free online tool No signup Live preview Browser-first privacy
AdvertisementTop tool sponsor space
AdvertisementBelow tool sponsor space

How to use the easing curve generator

  1. Drag the two handles to shape the curve, or pick a preset.
  2. Select Play preview to see the motion.
  3. Copy the generated cubic-bezier() value.

How this works

Everything runs entirely in your browser — the curve is drawn on a canvas, and the preview uses a real CSS transition with your exact cubic-bezier() value.

Common use cases

  • Design a custom CSS transition/animation easing curve
  • Preview how an easing curve affects motion before using it
  • Get the exact cubic-bezier() value for a design system

Frequently asked questions

Is this easing curve generator free?

Yes. It is completely free, with no signup and no limits.

What is a cubic-bezier easing curve?

It's a CSS timing function defined by four numbers (two control points) that controls how a transition or animation accelerates and decelerates over time.

Can I start from a common preset?

Yes — ease, linear, ease-in, ease-out, ease-in-out, and two overshoot presets are included as starting points.