Tool capabilities
- Input
- Options
- Output
- CSS · Options
How to use CSS Cubic Bezier
Drag or keyboard-adjust easing control points, test the animation and copy a valid cubic-bezier function.
- Change the colors, text or numeric controls above.
- Compare the preview as you adjust the controls.
- Copy the output or download it to your device.
CSS Cubic Bezier · Example
Input
{
"x1": 0.25,
"y1": 0.1,
"x2": 0.25,
"y2": 1
}Output
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Drag or keyboard-adjust easing control points, test the animation and copy a valid cubic-bezier function.
Usage notes
Inputs and results are processed on this device. Tool content is not sent to a processing server.