CSS cubic-bezier() Easing Curve Builder
Processed in your browser
Interactive bezier curve editor with drag control points, real-time animation comparison against standard ease curves, and copyable CSS.
Preset Easing Curves
Animation Test Bench
cubic-bezier(0.34, 1.56, 0.64, 1)
⚡
Direct In-Browser Handoff
CSS Styling & Design System Pipeline
Chain this tool with complementary private browser utilities for a complete zero-server workflow:
Helpful Examples
Spring / Overshoot
cubic-bezier(0.34, 1.56, 0.64, 1)
springHow to Use the CSS cubic-bezier() Easing Curve Builder
Client-side CSS transition timing curve generator. Model third-order polynomial cubic Bézier transition parameters $P_1(x_1, y_1)$ and $P_2(x_2, y_2)$ with live animation comparison against standard `ease-in-out` and bounce effects.
Privacy & Data Processing Notice
No user data leaves your browser. Computation is executed entirely on your device. We do not store, view, or transmit your inputs over our network. Your computation remains on your personal machine.
Frequently Asked Questions
What is a cubic-bezier in CSS?
The `cubic-bezier(x1, y1, x2, y2)` function defines an animation timing curve with four control coordinates. X values must be between 0 and 1; Y values can extend beyond [0, 1] to produce bounce or overshoot effects.
How do you achieve a playful 'spring' or 'bounce' animation in CSS?
By setting $y_1$ or $y_2$ greater than 1.0 (e.g. `cubic-bezier(0.34, 1.56, 0.64, 1)`), the animated element overshoots its target value before settling.
Related Utilities
Frequently paired browser tools in Web & Frontend Tools