Cubic Bezier Generator
Drag the curve or pick a preset to craft a cubic-bezier() easing.
Presets
PreviewClick the track to replay.
cubic-bezier(0.25, 0.1, 0.25, 1)
A cubic-bezier defines an easing curve from two control points: (x1, y1) and (x2, y2). The x values stay within 0–1 (time), while y can overshoot for bounce-like effects. Drag the two oxblood handles or load a preset, then copy the value into any transition or animation.
How to make an easing curve
Drag the two oxblood control points to shape the curve, or click a preset. The little dot animates with your curve so you can feel the timing, and the cubic-bezier() value below is ready to copy.
Where to use it
Paste the value into a transition or animation timing function, for example transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Pulling y past 1 gives a springy overshoot.
Questions
What are the four numbers?
They're the x and y of two control points: cubic-bezier(x1, y1, x2, y2). The curve runs from (0,0) to (1,1); x is time and stays within 0–1, while y can go beyond 1 to create overshoot or bounce.
How do the presets relate to CSS keywords?
The presets are the exact curves behind ease, ease-in, ease-out, ease-in-out, and linear. Load one as a starting point, then drag the handles to fine-tune the feel.