CSS Cubic Bezier Generator
Drag the two handles to shape an easing curve, watch a dot ride it against a steady one, and copy the cubic-bezier() value.
cubic-bezier(0.25, 0.1, 0.25, 1)The curve is drawn right in your browser. Nothing you set here is uploaded to BroBroGo.
FAQ
What do the two handles and four numbers mean?
The curve runs from bottom-left (the start) to top-right (the end), with time going left to right and progress going up. The two handles are the control points that bend it — each has an X and a Y, so together they are cubic-bezier(x1, y1, x2, y2). X stays between 0 and 1, while Y can go above the top or below the bottom to make the motion overshoot or pull back before it settles.
How do I use the value in my CSS?
Copy the cubic-bezier() and drop it wherever a timing function goes — transition-timing-function, animation-timing-function, or the shorthand, e.g. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). The keywords ease, ease-in, ease-out and ease-in-out are just fixed cubic-bezier curves, so picking one of those presets shows you the exact value behind the keyword.
Can it make a bounce or elastic effect?
Not on its own. A single cubic-bezier can anticipate and overshoot — the “back” presets pull one handle past the box to do exactly that — but it can only move one way and then settle. Bounce and elastic reverse direction several times, which no single cubic-bezier can express; those need CSS keyframes or the linear() function with many stops.