Material Design Standard Easing Curve
Design a custom CSS cubic-bezier() timing function by dragging two control points, preview it live against a linear reference, then copy the ready value.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the generator with x1=0.4, y1=0, x2=0.2, y2=1 already loaded — the standard easing curve published in Google's Material Design motion guidelines. Drag either handle or edit the numbers, and the curve, the live preview and the copyable CSS update together.
Material Design calls this curve "standard easing" and recommends it for most on-screen transitions — elements that are already visible and simply moving, resizing or fading within the same screen. Its shape accelerates quickly, then decelerates gently into place, which is why so many Android apps and Material-styled web UIs share the same transition feel without anyone noticing they're using the same four numbers.
Drop it straight into transition-timing-function or animation-timing-function for a Material-consistent feel, or use it as a reference point: Material's guidelines also define separate "decelerate" and "accelerate" curves for elements entering or leaving the screen, which this single standard curve is not meant to replace.
Example. Control points 0.42, 0, 0.58 and 1 copy cubic-bezier(0.42, 0, 0.58, 1).
Limit. Both x coordinates are clamped to 0–1, and y is limited to the editor range from −0.75 to 1.75.