What is a cubic bezier curve?

A cubic bezier curve is a parametric curve defined by four points: two fixed endpoints and two control points. In CSS, it maps time (x-axis) to animation progress (y-axis). The control points determine the shape of the curve, which determines how the animation accelerates and decelerates over its duration.

Can the y values go below 0 or above 1?

Yes. A y value above 1 means the animation overshoots its target. A y value below 0 means the animation goes in reverse briefly before moving forward. Both are valid in CSS and produce springy, elastic effects. The x values must stay between 0 and 1 (time cannot go backward).

What is the difference between cubic-bezier and steps()?

cubic-bezier() produces smooth, continuous motion. steps() produces discrete jumps between keyframes, like a film strip. Use cubic-bezier() for smooth transitions (opacity, transform, color). Use steps() for sprite animations, typewriter effects, or clock-tick motions.

How do I match an After Effects or Figma easing curve?

After Effects and Figma both use cubic bezier curves for easing. In After Effects, select the keyframes and open the Graph Editor to read the control point positions. In Figma, select a smart animate transition to see the easing values. The coordinate system is the same: enter those four values in this tool to preview the CSS equivalent.

Why does my animation look different in Safari?

Safari's rendering engine sometimes interpolates sub-pixel positions differently, which can make fast or overshooting animations appear slightly different from Chrome or Firefox. The timing function itself is identical across browsers. The visual difference comes from how each browser renders the intermediate frames, not from the math.

What is \\\"easing\\\" in plain language?

Easing controls the speed of change over time. In real life, objects accelerate and decelerate; they do not move at constant speed and then stop instantly. Easing applies that same principle to animations. An \\\\\\\"ease-in\\\\\\\" starts slow and speeds up. An \\\\\\\"ease-out\\\\\\\" starts fast and slows down.

Cubic-Bezier Easing Visualizer

This tool lets you design CSS animation timing functions by dragging two control points on a bezier curve graph. The curve determines how an animation progresses over time: a straight diagonal is linear (constant speed), an S-curve starts slow and ends slow, and a steep initial rise means the animation fires quickly and decelerates. Drag the handles, watch a live animation preview, and copy the cubic-bezier() value into your CSS. Everything runs in your browser. No data is sent anywhere.

How this tool works

A CSS cubic-bezier() function defines a timing curve with four numeric parameters: cubic-bezier(x1, y1, x2, y2). These represent the coordinates of two control points (P1 and P2) on a bezier curve where: - The start point P0 is fixed at (0, 0), representing 0% progress at 0% time - The end point P3 is fixed at (1, 1), representing 100% progress at 100% time - P1 (x1, y1) is the first control point you drag - P2 (x2, y2) is the second control point you drag

Worked example

A springy menu uses P1 at (0.34, 1.56) and P2 at (0.64, 1) so the curve overshoots past 1 on the y-axis, then settles. The preview shows the overshoot before you paste the timing function into CSS.

Frequently asked questions

What is a cubic bezier curve?
A cubic bezier curve is a parametric curve defined by four points: two fixed endpoints and two control points. In CSS, it maps time (x-axis) to animation progress (y-axis). The control points determine the shape of the curve, which determines how the animation accelerates and decelerates over its duration.
Can the y values go below 0 or above 1?
Yes. A y value above 1 means the animation overshoots its target. A y value below 0 means the animation goes in reverse briefly before moving forward. Both are valid in CSS and produce springy, elastic effects. The x values must stay between 0 and 1 (time cannot go backward).
What is the difference between cubic-bezier and steps()?
cubic-bezier() produces smooth, continuous motion. steps() produces discrete jumps between keyframes, like a film strip. Use cubic-bezier() for smooth transitions (opacity, transform, color). Use steps() for sprite animations, typewriter effects, or clock-tick motions.
How do I match an After Effects or Figma easing curve?
After Effects and Figma both use cubic bezier curves for easing. In After Effects, select the keyframes and open the Graph Editor to read the control point positions. In Figma, select a smart animate transition to see the easing values. The coordinate system is the same: enter those four values in this tool to preview the CSS equivalent.
Why does my animation look different in Safari?
Safari's rendering engine sometimes interpolates sub-pixel positions differently, which can make fast or overshooting animations appear slightly different from Chrome or Firefox. The timing function itself is identical across browsers. The visual difference comes from how each browser renders the intermediate frames, not from the math.
What is \\\"easing\\\" in plain language?
Easing controls the speed of change over time. In real life, objects accelerate and decelerate; they do not move at constant speed and then stop instantly. Easing applies that same principle to animations. An \\\\\\\"ease-in\\\\\\\" starts slow and speeds up. An \\\\\\\"ease-out\\\\\\\" starts fast and slows down.