Browse 25+ Tools

Cubic Bezier Visualizer

Master web motion design. Adjust the control points to create custom easing curves, elastic snaps, and bouncy transitions.

/* Generated on cssgen.org */

The Mathematics of Motion

In CSS, the transition-timing-function property dictates how intermediate values are calculated during an animation. While keywords like linear or ease are convenient, they are often too rigid for premium UI design.

Under the hood, those keywords are just aliases for a Cubic Bezier curve. By explicitly defining the four coordinate points of this curve—(x1, y1, x2, y2)—you gain total control over the acceleration and deceleration of your animations. The X-axis represents time, while the Y-axis represents the progression of the animation. Read more on the MDN Web Docs.

🎾

Pro Tips for Easing

  • Breaking the Boundary: The X-values (time) must always stay between 0 and 1. However, the Y-values (progression) can exceed 1 or drop below 0. This is the secret to creating a "bounce" effect, as it tells the browser to temporarily push the animation past its final destination before snapping back.
  • Matching Context: Fast, linear animations are great for opacity fades. However, if an object is physically moving across the screen (like a sidebar sliding in), use an ease-out curve. It simulates real-world friction, making the UI feel physical and grounded.
  • Combine with Transforms: Once you find the perfect easing curve, plug it into our Button Hover Generator or Transform Generator to see it interact with hardware-accelerated scaling and 3D rotations.
🔗

Support This Free Tool

If this tool saved you from doing bezier math in your head today, the best way to say thanks is by linking to us from your dev blog or repository. Just copy the snippet below!

<a href="https://cssgen.org/cubic-bezier" target="_blank" rel="noopener noreferrer">CSS Cubic Bezier Easing Visualizer</a>

Frequently Asked Questions

What is a cubic-bezier in CSS?

A cubic-bezier is a mathematical function used in CSS to define the speed curve of a transition or animation. It uses four decimal values (x1, y1, x2, y2) to map the progression of time to the progression of the visual animation.

Why does my CSS animation temporarily go backwards?

If your cubic-bezier Y-values fall outside the 0.0 to 1.0 range (for example, setting y2 to 1.5), the animation is instructed to overshoot its target value and snap back, creating an elastic bounce effect. This literally causes the animated property to reverse direction briefly.

Can I use cubic-bezier with @keyframes?

Yes. You can apply a cubic-bezier globally to the animation-timing-function property, or you can apply different bezier curves to specific percentage steps within the @keyframes block itself for incredibly complex motion paths.