Cubic bezier generator
Drag the two handles, type exact numbers, or start from a preset such as ease-in-out. The track below plays the real easing so you can feel it before you copy the CSS.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Pick a preset, or drag the two handles to shape the curve. A steeper middle means faster movement at that moment.
- Fine-tune with the number fields or the arrow keys.
- Watch the track below the curve. Change the duration to judge how it feels at real speed.
- Copy the timing function or the example declaration.
How it works
The curve is a cubic Bezier from (0, 0) to (1, 1) with your two control points. For a time x between 0 and 1 the browser finds the curve parameter t where the horizontal position equals x and reads the vertical position there as the progress. The preview hands the same cubic-bezier() text to the Web Animations API, so it is the browser’s own easing, not an approximation. Values are rounded to two decimals.
Example
cubic-bezier(0.42, 0, 0.58, 1) is the same curve as the keyword ease-in-out: slow at both ends and fastest in the middle, with exactly half the progress at half the time. cubic-bezier(0.34, 1.56, 0.64, 1) has y1 above 1, so the element overshoots its target slightly before settling.
Tips
- A common rule of thumb is 150 to 400 milliseconds for short interface animations; it is a guideline, not a standard.
- If the preview does not play, your system may be set to reduce motion; press Play again to run it once.
Frequently asked questions
What do the four numbers mean?
They are the two control points of a Bezier curve that starts at (0, 0) and ends at (1, 1). The horizontal axis is time and the vertical axis is progress. The first point (x1, y1) shapes the start, the second (x2, y2) shapes the end.
Why must x be between 0 and 1?
CSS rejects a cubic-bezier() whose x values are outside 0 to 1, because time cannot run backwards. This editor keeps x in range. The y values may go beyond 0 and 1, which makes the motion overshoot or pull back first.
How do ease, ease-in and ease-out differ?
ease-in starts slowly and speeds up, ease-out starts fast and slows down, and ease-in-out does both. The default ease starts a little faster and ends gently. Their values are listed in the CSS specification and are available as presets.
Where do I use the result?
In transition-timing-function, animation-timing-function, or inside the transition and animation shorthands. The same value can be passed as the easing option of the Web Animations API.
Is there a keyboard way to edit the curve?
Yes. Tab to a handle and use the arrow keys to move it by 0.01, or hold Shift for 0.1. You can also type values into the four number fields.