Easing Editor
Every curve comes with a note on when to use it. Preview any of them on a panel opening, a toast arriving and a card scaling in — then compare two side by side before you commit. Exports CSS, a Tailwind theme token, or linear().
Library
Pick one, then adjust it if you need to.
Entering the screen
Fast at the start, settling at the end. Almost everything a user sees appear should use one of these.
Moving between two states
Symmetric curves for things already on screen that travel from one place to another.
Platform defaults
What the major design systems ship. Useful when your interface should feel native rather than authored.
With personality
These overshoot past the target and come back. Effective in small doses, tiring everywhere else.
Current curve
cubic-bezier(0.215, 0.61, 0.355, 1)
A safe default for most UI entrances — dropdowns, tooltips, menus.
Most interface motion lands between 150ms and 500ms. Longer than that and people start waiting for it.
Preview
Out Cubic
Panel opening
Toast arriving
Card scaling in
Travel
Output
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-duration: 420ms;Frequently asked
Which curve should I use if I only pick one?
Out Cubic. It is fast at the start and settles at the end, which is what almost anything appearing on screen should do. Reach for something else only when you have a reason.
Why do most of the presets ease out rather than in?
Because ease-in starts slow, and for anything the user just triggered that reads as lag. Ease-in is for elements leaving the screen, where nobody is waiting on them. In-out belongs to things already on screen moving from one place to another.
How long should the animation be?
Most interface motion belongs between 150ms and 500ms. Under 100ms is barely perceived; over 500ms and people start waiting for the animation instead of using the interface. Larger surfaces can carry slightly longer durations than small ones.
What is the linear() output for?
Bezier curves are natively supported in CSS, so you rarely need it there. linear() is useful when you need to hand the same shape to something that only accepts a list of points — the Web Animations API or certain motion libraries.
Are overshooting curves a bad idea?
Not at all, but they are loud. A curve that passes the target and comes back draws attention, which is exactly right for a confirmation and exactly wrong for a menu that opens forty times a session.
What about reduced motion?
The previews here respect prefers-reduced-motion and hold their final state instead of animating. Whatever you ship should do the same — easing is a refinement, not something the interface depends on.