CSS Cubic Bezier Animation Easing Generator
Create buttery smooth custom transitions and snappy motion curves. Adjust cubic-bezier P1 and P2 coordinates and preview the motion live before exporting.
How to Use CSS Cubic Bezier Animation Easing Generator
Adjust Curve Handles
Tune the X and Y coordinates of control points P1 (x1, y1) and P2 (x2, y2).
Test Motion
Click Play to watch the animation ball move using your custom easing curve.
Copy Transition Rule
Copy cubic-bezier(x1, y1, x2, y2) directly into your CSS transition or animation declaration.
About CSS Cubic Bezier Animation Easing Generator
Defines a third-order Bézier curve through control points P0(0,0), P1(x1,y1), P2(x2,y2), and P3(1,1) governing the progress rate of CSS animations over time.
Supported Formats
Operational Limits
- •Time axis (X) is constrained between 0.0 and 1.0; Y axis can overshoot for spring/bounce effects.
Key Features
- Interactive curve coordinate sliders
- Common preset easing buttons (ease, ease-in, ease-out, ease-in-out, bounce)
- Live motion animation runner
- Customizable duration slider
- Instant CSS export
Frequently Asked Questions
Related Tools
More in CSS ToolsCSS Flexbox Playground & Generator
Interactive visual CSS Flexbox playground to configure container directions, alignments, wrapping, and item ordering with live CSS export.
CSS Text Shadow Generator
Design single and multi-layer CSS text shadows with real-time controls for X/Y offset, blur radius, color, and opacity.
CSS Clip-Path Generator & Shape Masker
Visual CSS clip-path polygon and shape builder: create triangles, hexagons, stars, chevrons, and custom polygon coordinate masks.