BYTETOOLS

Cubic Bezier Generator

Drag two control points to build a cubic-bezier() easing curve, preview it on a moving dot, and copy the CSS timing function straight into your stylesheet.

Drag the two control points

Teal handle is P1, pink handle is P2. The sliders below do the same job.

Preview

Position

Scale

Control points

0.25
0.1
0.25
1
1200

Timing function

cubic-bezier(0.25, 0.1, 0.25, 1)

CSS

.animated {
  transition: transform 1200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Or as an animation timing function */
.animated {
  animation: slide 1200ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
}
Progress at 0% of the duration0.00%
Progress at 10% of the duration9.48%
Progress at 25% of the duration40.85%
Progress at 50% of the duration80.24%
Progress at 75% of the duration96.05%
Progress at 90% of the duration99.43%
Progress at 100% of the duration100.00%

What is the Cubic Bezier Generator?

Every CSS transition has an easing curve, and the four keywords browsers ship with only get you so far.

  • Canvas curve with two draggable control points
  • Fourteen presets including back, anticipate and bounce
  • Live position and scale previews at your chosen duration
  • Progress read-out at seven points along the timeline
  • Warns when the curve overshoots the 0 to 1 range
  • Copyable timing function and full CSS rule

How to use the Cubic Bezier Generator

  1. 1

    Drag the two handles on the curve, or pick a named preset from the dropdown.

  2. 2

    Fine-tune each coordinate with the P1 and P2 sliders if you want exact numbers.

  3. 3

    Watch the position and scale previews, and press Replay to restart them.

  4. 4

    Adjust the duration slider until the motion feels right at real speed.

  5. 5

    Copy the cubic-bezier() timing function, or the whole transition and animation rule.

About the Cubic Bezier Generator

Every CSS transition has an easing curve, and the four keywords browsers ship with only get you so far. A cubic-bezier() function lets you place the two control points yourself, which is how you get motion that decelerates late, overshoots slightly, or winds up before it moves. This editor gives you the curve, the numbers and a live preview at once.

The curve is drawn on a canvas and you drag the teal and pink handles to shape it. Underneath, the tool inverts the curve exactly the way browsers do — a Newton-Raphson solve on x, falling back to bisection where the slope goes flat — so the progress percentages it reports are the ones your animation will actually hit. Named presets cover ease-in-out, expo, back, anticipate and a bounce approximation.

Everything runs locally in your browser. Nothing you build is uploaded, there is no account, and the page keeps working with no connection once it has loaded.

Frequently asked questions

What does cubic-bezier mean in CSS?

It is a timing function that describes how a value changes over the life of an animation. The four numbers are the x and y coordinates of two control points; the start and end points are fixed at 0,0 and 1,1. Together they bend the straight line of linear motion into an ease.

Why must the x values stay between 0 and 1?

The x axis is time, and time cannot run backwards. Keeping both x coordinates inside 0 to 1 guarantees the curve gives exactly one progress value for every moment, which is why the CSS specification requires it. The y values have no such limit, which is what allows overshoot.

How do I make a bounce or overshoot effect?

Push one of the y values above 1, or below 0 for a wind-up before the move. The back and anticipate presets do exactly that. Be careful where you apply it: overshooting looks great on transform, but going past the target value of an opacity or a colour looks like a bug.

What is the difference between ease and ease-in-out?

The ease keyword is cubic-bezier(0.25, 0.1, 0.25, 1), which accelerates quickly and spends a long time slowing down. The ease-in-out keyword is cubic-bezier(0.42, 0, 0.58, 1), which is perfectly symmetric. Ease feels snappier at the start; ease-in-out feels more mechanical and even.

Can I use cubic-bezier for CSS animations as well as transitions?

Yes. The same function works as an animation-timing-function, and this tool gives you both rules. One thing to know is that in a keyframe animation the timing function applies between each pair of keyframes, not across the whole animation.

Related tools