Cubic Bezier Editor
Drag control points to design cubic-bezier easing curves, try presets, preview the motion, and copy the CSS.
This tool runs entirely in your browser. Your input is never uploaded.
Speed curve
cubic-bezier(0.42, 0, 0.58, 1)
Drag the two handles to shape the curve; x stays between 0 and 1, while y may overshoot.
Ball preview
0%
CSS
cubic-bezier(0.42, 0, 0.58, 1)
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
Use it as transition-timing-function or animation-timing-function.
Cubic Bezier Editor
Design cubic-bezier() timing functions visually and copy them straight into your CSS.
- Drag the two control points on the speed curve — x stays between 0 and 1 as CSS requires, while y may overshoot the unit box, which is how back-style easing gets its bounce.
- Pick from common templates: CSS keywords (linear, ease, ease-in/out), quad/cubic/quart easing, and back curves with overshoot.
- A ball preview runs the current curve across a track, with duration and loop controls, plus a scrubber to inspect any single moment. Overshoot carries the ball slightly past the ends before it settles.
- Copy the
cubic-bezier(...)value alone or together with ready-madetransition-timing-functionandanimation-timing-functiondeclarations.
Everything runs locally in your browser.