CSS Cubic Bezier Generator
Drag the control points to design your easing curve, watch the live preview, and copy the CSS.
Advertisement
Reading the curve
The horizontal axis is time (0 → 1), the vertical axis is progress (0 → 1). A steep curve means fast motion; a flat one means slow. Curves that bow above the diagonal accelerate early (ease-out); below the diagonal they accelerate late (ease-in). When a handle pushes the curve outside the 0–1 band, the animation overshoots — the springy easeOutBack feel.
Using the output
Paste the copied value into transition-timing-function or animation-timing-function. For example: transition: transform 300ms cubic-bezier(0.34, 1.3, 0.64, 1); Keep UI motion quick — 150–300 ms for small elements — and test on the live preview here first.
FAQ
What is cubic-bezier() in CSS?
cubic-bezier() is a CSS timing function that defines how an animation's speed changes over time. It takes four numbers — cubic-bezier(x1, y1, x2, y2) — describing two control points of a Bézier curve from (0,0) to (1,1). It is used in animation-timing-function and transition-timing-function.What do the four numbers in cubic-bezier() mean?
x1,y1 is the first control point (influence at the start of the animation) and x2,y2 is the second control point (influence at the end). The x values must stay between 0 and 1; y values can go outside 0–1, which creates overshoot and bounce effects.
Can the Y values go outside 0 to 1?
Yes. y outside [0, 1] makes the animated value overshoot its target (y > 1) or dip below its start (y < 0), producing springy bounce effects like easeOutBack. The x values, however, must remain within [0, 1] for the timing function to be valid.
Which easing should I use for UI animations?
For most UI work: ease-out (fast start, gentle stop) for things entering the screen, and ease-in-out for things moving within it. Keep durations short — 150–300 ms for small elements. Start from the presets in this tool, then drag the handles until the motion preview feels right.
Advertisement