Skip to content
littlekit.app
All tools

Cubic Bézier editor

Shape an easing curve with draggable handles, exact points and a motion preview.

Start · 0Time →1 · End

Drag a handle or use arrow keys. Hold Shift for larger steps. Y values outside 0–1 create overshoot.

Generated CSS
transition: transform 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);
Processed on your device

How it works & useful details

How to use this tool

Drag either control point or focus it and use arrow keys. Shift moves ten steps. Play a single preview to compare the resulting motion.

Supported values and limitations

X coordinates are bounded from 0 to 1; Y coordinates from -1 to 2 allow overshoot. Exact numeric inputs and presets provide keyboard alternatives. Animation runs only when requested, lasts at most three seconds and respects reduced-motion preferences.