FAHAQ

Cubic Bezier Generator

Craft custom easing curves for CSS.

Free cubic-bezier() generator. Adjust the four control values to shape a custom easing curve, see the curve and an animated preview using it, and copy the cubic-bezier CSS. Runs in your browser.

How to use the Cubic Bezier Generator

  1. 01Drag the four sliders or pick a preset easing.
  2. 02Watch the curve and the animated dot use your easing.
  3. 03Copy the cubic-bezier() timing function.

Frequently asked questions

What do the four numbers mean?

They are the x and y coordinates of the two control points that shape the easing curve between the start and end. Values outside 0–1 on the y axis create overshoot (bounce-like) effects, which the animated preview demonstrates.