A cubic-bezier() easing curve is defined by two control points, P1 (x1, y1) and P2 (x2, y2); the start (0,0) and end (1,1) points are fixed. Enter the four numbers and the curve is plotted as SVG in real time, mapping animation progress (x, time) to output (y, value). The x values must stay between 0 and 1, while y may overshoot for a bounce-like effect.
Use the preset buttons to load the CSS keywords (linear, ease, ease-in, ease-out, ease-in-out), then tweak from there. Click Preview to watch a box move using your curve as the transition timing function. The generated cubic-bezier() value is ready to paste into a CSS transition or animation. Everything runs locally in your browser.
CSS Gradient GeneratorCSS Shadow GeneratorCSS Unit Converter