The `cubic-bezier()` function defines the speed curve of a CSS transition or animation, allowing you to create custom easing effects beyond the standard 'ease-in' or 'linear'. Our generator provides a visual way to create these curves. Simply drag the handles on the graph to manipulate the curve, see a live preview of the animation speed, and get the corresponding CSS code. It's an essential tool for UI/UX designers and developers who want to create fluid, natural-feeling motion on the web.
γ°οΈcubic-bezier() Generator
Frequently Asked Questions
What do the two handles represent?
The two handles control the shape of the BΓ©zier curve. The first handle (P1) controls the start of the curve, determining how quickly the animation begins. The second handle (P2) controls the end of the curve, determining how it slows to a stop.
Are there any preset curves?
While this tool is for creating custom curves, CSS has built-in presets like `ease`, `ease-in`, `ease-out`, and `ease-in-out`, which are themselves just shorthands for specific `cubic-bezier()` values.
