Drag the handles and race your easing against ease and linear, side by side.
An easing curve is the difference between an interface that feels expensive and one that feels like a slideshow โ and you cannot judge it by reading four numbers. This cubic-bezier editor lets you drag the two control points and immediately race your curve against ease and linear in the same window. Watching all three move at once is the only way to tell whether yours is actually better or just different.
cubic-bezier(x1, y1, x2, y2) gives the coordinates of two control points that bend the path from (0,0) โ the start to (1,1) โ the end. The X axis is time and must stay within 0 and 1, because you cannot go back in time; browsers reject the whole declaration if you try. The Y axis is progress, and it is allowed to leave the box: a Y above 1 overshoots and settles back, which reads as a bounce, while a Y below 0 pulls back before moving, which reads as anticipation. That single fact is where most of the good motion design lives.
The honest short answer: ease-out for things arriving (fast in, gentle stop โ it feels responsive because it moves the instant you click), ease-in for things leaving, and ease-in-out for things moving between two places on screen. Avoid linear for anything physical โ nothing in the real world starts and stops at a constant speed, which is precisely why linear motion feels robotic. The presets include the Material Design standard curves and a couple of overshoot ones worth stealing.
Related: CSS Shadow Generator ยท Palette Extractor ยท All free tools