CSS Cubic-Bezier Curve Generator

Shape a CSS easing curve by dragging its two control points and watch a sample element animate with it, at a duration you can change. The four CSS keywords are just named curves with fixed coordinates — ease is 0.25, 0.1, 0.25, 1 — and loading one as a starting point is usually faster than building from scratch. The two axes are not symmetrical, and knowing which is which saves a lot of confusion. Vertical is progress, and pushing a handle above or below the box is legal: that is what gives you overshoot and anticipation, the spring-like feel. Horizontal is time, and CSS accepts only values between 0 and 1: the browser discards a declaration outside that range entirely, so the editor stops a handle at the box's left and right edges, and a typed X is held to the same range.