Cubic Bezier & Easing Editor

They look almost identical but do opposite jobs. The bare linear keyword means "no easing at all" — constant speed, equivalent to cubic-bezier(0, 0, 1, 1). The linear() function (with parentheses and at least one stop) is the newer CSS Easing Level 2 feature this tool's second tab builds — a fully custom piecewise curve that can bounce, spring, or step, named linear only because each segment between its points is a straight line, not because the overall motion is constant speed.

Because a CSS cubic-bezier() timing function is mathematically defined by exactly two control points (plus the fixed start and end at (0,0) and (1,1)) — that's the whole feature, not a limitation of that particular tool. To get a curve with more shape than two points allow — a bounce, an overshoot-then-settle, multiple humps — you need linear() instead, which is what this tool's second tab is for.

No — the CSS spec requires both to be between 0 and 1, since they represent a point in time and time can't run backwards or loop within a single easing curve. y1 and y2 have no such limit, which is exactly what lets a cubic-bezier curve overshoot past its endpoints for a bounce-like effect.

linear() is piecewise-linear by definition — straight segments between points, not smoothed curves. That's intentional and is what makes it capable of exact bounces and springs (which are naturally made of many nearly-straight segments) rather than the smooth S-curves cubic-bezier() produces. Add more points and space them closer together where you want the motion to feel smoother.

Yes — both accept any easing value covered here: the named keywords (ease, linear, ease-in-out, etc.), cubic-bezier(...), linear(...), and step functions. The Web Animations API's easing option (used with element.animate()) accepts the same syntax as a string too.