Cubic Bezier Editor
Edit cubic-bezier easing curves by dragging control points on an SVG canvas. See the velocity and acceleration graphs in real time, compare with standard presets, and export to CSS, Framer Motion, GSAP, or Motion One.
A cubic-bezier easing function is defined by four values — the x,y coordinates of two control points P1 and P2. Dragging them on a canvas changes how your CSS animations accelerate and decelerate. Export to CSS transition-timing-function, Framer Motion, GSAP, or Motion One with one click.
Curve Editor
drag handles • P1 purple • P2 pinkVelocity Graph
Compare Presets
Export
/* CSS timing function */ transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Frequently Asked Questions
What is a cubic bezier curve?
CSS animation timing functions are defined by a cubic bezier curve with two control points P1(x1,y1) and P2(x2,y2). The endpoints are fixed at (0,0) and (1,1). Dragging P1 and P2 changes how the animation accelerates and decelerates.
Why do some curves go outside the box?
The y-axis represents the animated value and can exceed [0,1] to create overshoot (bounce-back) effects. The x-axis must stay in [0,1] because it represents time.
What is the velocity graph?
The velocity graph shows dy/dx — how fast the animated property is changing relative to time. A flat line means constant speed; a high peak means fast acceleration.