Easing previewer — cubic-bezier curves
Preview named easing curves and copy the cubic-bezier CSS. It runs entirely in your browser (0 uploads, works offline).
How to use it
- Choose an easing.
- See its curve drawn out.
- Copy the cubic-bezier CSS.
FAQ
How do I pick a CSS easing for free?
Choose from common easings — ease-in-out, back, expo and more — and this page draws the curve and gives you the cubic-bezier() timing function to paste into a transition, on your device with no upload.
What does the curve show?
The horizontal axis is time and the vertical axis is progress. A curve that overshoots the top (like the "back" easings) creates a slight bounce past the end value.
Is anything uploaded?
No. Everything runs in your browser and nothing is transmitted or stored, which you can verify by turning off your Wi-Fi.
Where do I use the value?
In transition-timing-function or animation-timing-function, or anywhere a CSS cubic-bezier() is accepted.
Limits
Previews a curated set of named curves; a draggable custom-curve editor is not included here.
Related
The keyframe and animation helpers pair with this; the gradient generator styles the element.
Bookmark this page (Ctrl+D, or ⌘D on Mac) or install the app — it works offline the next time you need it.