Cubic Bezier Generator
NewVisually design a CSS cubic-bezier() easing curve by dragging control points, with live animation preview.
Frequently Asked Questions
What do the four numbers in cubic-bezier() mean?
They're two control points, (x1,y1) and (x2,y2), for a cubic Bezier curve that maps animation progress (x-axis, time from 0 to 1) to output value (y-axis, typically 0 to 1 but can overshoot). The curve always starts at (0,0) and ends at (1,1); the two control points bend the path between them to create the easing feel.
Why can y-values go above 1 or below 0?
That's valid and intentional in CSS — control-point y-values outside [0,1] create "overshoot" effects, like the built-in "back" preset, where an element slightly overshoots its target before settling, which is a common effect in modern UI motion design.
How is this different from the built-in ease, linear, ease-in-out keywords?
Those keywords are just named shortcuts for specific cubic-bezier() values (for example, ease is cubic-bezier(0.25, 0.1, 0.25, 1)). This tool lets you dial in any custom curve visually rather than being limited to the handful of predefined keywords.
Can I drag the curve directly instead of typing numbers?
Yes — the green and orange dots on the curve diagram are draggable control points; dragging them updates the number inputs and the generated CSS live.
Does the animation preview button actually use my generated curve?
Yes — clicking "Preview animation" applies your exact current cubic-bezier() value as the transition-timing-function on the moving preview dot, so what you see is exactly the easing you'll get in real CSS.