Cubic Bezier Easing Editor
Drag the two orange handles or type the four numbers. The ball shows how the motion feels and the table shows the progress at each tenth of the time.
Start from a preset
Worked examples
The ease keyword at the halfway point
cubic-bezier(0.25, 0.1, 0.25, 1) at 50% of the time
About 80.2% of the way
It covers most of the distance early, then settles.
About Cubic Bezier Easing Editor
Easing is what makes motion feel natural. Things in the real world speed up and slow down, and a transition that moves at one steady speed feels mechanical. In CSS, easing is described by a cubic Bezier curve with four numbers, which are hard to picture. This editor draws the curve and lets you drag its handles until the motion feels right.
Choose a preset to start, then adjust. The ball under the graph moves using the exact timing function you have built, and the table shows how far along the move is at every tenth of the time. When it feels right, copy the cubic-bezier value or the ready-made transition rule.
How to use Cubic Bezier Easing Editor
- Start from a preset such as ease out or overshoot.
- Drag the two orange handles, or type the four numbers.
- Press Play and watch the ball, then read the progress table.
- Copy the timing function or the transition rule.
Common uses
- Tuning the feel of buttons, menus and modals
- Creating a bouncy overshoot for a notification
- Matching the easing used by a design system
- Understanding what ease, ease-in and ease-out actually do
Frequently asked questions
What do the four numbers mean?
They are the positions of two control handles. The first pair pulls the start of the curve and the second pair pulls the end. The first number of each pair is how far across time, from 0 to 1, and the second is how far along the movement.
Why must the across values be between 0 and 1?
Time cannot run backwards, so the handles cannot sit before the start or after the end. The up values have no such limit, and going outside 0 to 1 makes the motion overshoot or pull back.
How long should a transition last?
Small interface changes feel best between 150 and 400 milliseconds. Larger movements, such as a panel crossing the screen, can take up to about 600. Anything longer tends to feel slow.
What is the difference between ease and ease-in-out?
The ease keyword is cubic-bezier(0.25, 0.1, 0.25, 1), which starts quickly and finishes gently. Ease-in-out is cubic-bezier(0.42, 0, 0.58, 1), which starts and finishes gently and is symmetrical.