Springr
Cubic Bezier
All tools

Cubic Bezier

Visualize and tweak cubic-bezier easing curves with a live preview.

Cubic bezier curveP1P2
CSS
cubic-bezier(0.40, 0, 0.20, 1)
Presets
Animation preview

About Cubic Bezier

Visualize and tweak cubic-bezier easing curves with a live preview. Build the exact timing function you want for CSS transitions and animations, then copy it straight into your code.

How to use it

  1. Drag the two control points of the curve, or enter their values.
  2. Watch the live preview to see how the easing feels.
  3. Copy the cubic-bezier() value into your CSS.

Frequently asked questions

What is a cubic-bezier curve?
A cubic-bezier easing curve defines how a CSS transition or animation speeds up and slows down over time, using two control points. It is the value you pass to transition-timing-function.
Can control points go outside the 0 to 1 range?
Yes. The y values of the control points can go beyond 0 and 1, which produces overshoot and anticipation effects. The x values must stay between 0 and 1.