Cubic Bezier / Easing help

Shape a CSS easing curve and see it move.

Steps

1. Choose a named preset, or drag the four control values.
2. The curve is drawn and a dot animates with it; press Play to replay.
3. Copy the cubic-bezier(), or paste one in to edit it.

Notes

• The x values are clamped to 0..1 by CSS; the y values can overshoot for "back" style easings.
• Presets cover the common sine, quad, cubic, expo, and back curves.

Everything runs in your browser. Nothing you enter or drop is uploaded.