How to Use the CSS Cubic-Bezier & Easing Curve Visualizer
-
1
Drag control handles P1 and P2 on the coordinate grid to shape the acceleration curve.
-
2
Click "Test Animation" to compare your custom curve against linear, ease-in, and ease-out.
-
3
Choose presets: Fast In Slow Out, Spring Bounce, Snappy Pop, or Gentle Wave.
-
4
Copy the generated `cubic-bezier(x1, y1, x2, y2)` code snippet.
Practical Example & Use Case
Common Real-World Scenario
Engineering snappy, natural-feeling button hover transitions and modal entrance animations with spring physics.
Technical Notes & Limitations
Browser Engine Architecture
Y coordinates can exceed [0, 1] range to produce overshoot and bouncing elastic effects in modern browsers.
Frequently Asked Questions
What are the 4 cubic-bezier values?
They represent coordinates (X1, Y1, X2, Y2) of two control points that guide the rate of acceleration over time.