About this tool
Preview a cubic-bezier timing curve and copy the CSS.
Type the four numbers and play the dot once. The movement uses that curve for a little over a second. The declaration is ready to paste onto a transition.
The page does not change your site. A curve can overshoot when a value is outside 0 to 1. Watch the dot before you copy it.
Read the privacy line on this page before you use the result in public.
Quick steps
- Preview a cubic-bezier timing curve and copy the CSS.
- Type the four numbers and play the dot once. The movement uses that curve for a little over a second. The declaration is ready to paste onto a transition.
- The page does not change your site. A curve can overshoot when a value is outside 0 to 1. Watch the dot before you copy it.
Read the privacy line on this page before you use the result in public.
FAQ
Preview a cubic-bezier timing curve and copy the CSS.
Type the four numbers and play the dot once. The movement uses that curve for a little over a second. The declaration is ready to paste onto a transition.
The page does not change your site. A curve can overshoot when a value is outside 0 to 1. Watch the dot before you copy it.
Read the privacy line on this page before you use the result in public.