Cubic Bezier Curve Generator

What is a cubic-bezier curve?

A cubic Bézier curve is defined by four control points: two fixed endpoints at (0,0) and (1,1), and two adjustable control points that bend the curve between them. CSS uses this exact formulation in its cubic-bezier(x1, y1, x2, y2) timing function to shape how an animation’s value progresses over time. By dragging the blue and green handles in this generator, you tune the easing and copy a ready-to-paste CSS snippet for transitions and keyframes.

How to use the generator

Drag the blue (P1) or green (P2) handle on the curve to shape the easing.
Fine-tune the X/Y inputs to hit precise control points.
Click a preset (linear, ease, ease-in, ease-out, ease-in-out) to start from a known curve.
Adjust the duration to see how a sample element moves with your timing function.
Copy the generated CSS into your stylesheet.

Bézier formula

For parameter t ∈ [0, 1], a cubic Bézier curve is: B(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³·P₃. CSS keeps P₀ = (0,0) and P₃ = (1,1), so changing P₁ and P₂ reshapes the in-between progress.

Frequently Asked Questions

Why are X values clamped between 0 and 1, but Y is not?

Time has to move forward, so CSS requires the X coordinates of both control points to stay within the [0, 1] range. The Y values may extend beyond that range to produce overshoot or bounce style easings.

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

Both ease into and out of the animation, but ease (cubic-bezier(0.25, 0.1, 0.25, 1)) accelerates faster than ease-in-out (cubic-bezier(0.42, 0, 0.58, 1)). Pick the preset that matches the “personality” you want for the motion.

Can I use a bezier curve for keyframes too?

Yes. Apply the animation-timing-function property or use the generated value in the shorthand animation. You can also assign a separate timing function per @keyframes step using animation-timing-function inside the keyframe.

Why does my preview look identical for different curves?

Some curves are subtle on short animations. Increase the duration field or compare two values side by side to make the difference visible. Curves with extreme Y values (e.g. above 1 or below 0) produce overshoot animations that are easier to see.

How accurate is the generated CSS?

Coordinates are rounded to three decimal places, which is more than enough for CSS animations. If you need higher precision, tweak the X/Y inputs directly to the desired digits.