CSS Cubic Bezier Generator
Create custom CSS animation easing curves visually. Drag control points, preview animations, and copy the cubic-bezier() value.
Presets
Control Points
CSS
transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
Frequently Asked Questions
What is a cubic bezier curve?+
A cubic bezier curve defines the speed of a CSS transition or animation over time. It's controlled by two points (P1 and P2) that shape the acceleration curve. The CSS function cubic-bezier(x1, y1, x2, y2) takes these two control points.
What do the four values mean?+
The four values are x1, y1, x2, y2 — the coordinates of two control points. x values must be between 0 and 1 (time axis). y values can go outside 0-1 to create overshoot/bounce effects. P1 controls the start of the animation, P2 controls the end.
Can y values be negative or greater than 1?+
Yes. y values outside 0-1 create overshoot and bounce effects. A negative y1 makes the animation start by moving backward. A y2 greater than 1 makes it overshoot the target before settling.