Cubic-Bezier Easing Editor
Edit a CSS cubic-bezier() easing curve by dragging its two control points on the graph, or pick a named easing. The horizontal axis is time (0→1), the vertical axis is progress. Copy the ready CSS string, watch a live easing preview animation, and tweak the four values directly. Control-point x stays in [0,1] (as CSS requires); y can overshoot above 1 or below 0 for spring-like motion. Everything runs locally in your browser.
CSS transition-timing-function and the Web Animations API accept cubic-bezier(x₁, y₁, x₂, y₂), a cubic Bézier from (0,0) to (1,1) with control points (x₁,y₁) and (x₂,y₂). x must stay in [0,1]; y may exceed that range for overshoot. The curve maps elapsed time to eased progress: for a time fraction t, the eased value is the curve's y at the parameter whose x equals t. Drag the handles, type values, or pick a preset. Runs locally.