Drag the handles to shape a CSS easing curve and watch it animate.
Handles can go above 1 or below 0, which makes the animation overshoot and spring back. That is how a bounce is built.
cubic-bezier(0.25, 0.1, 0.25, 1)
t=0.5 -> 0.802
The named CSS easings plus a few useful extras are one click away. They are a better starting point than dragging from linear, and most real work is a small tweak from one of them.
The horizontal axis is time and the vertical is progress. Pulling a handle up early makes the animation start fast; pulling it up late makes it finish fast.
The preview animates with your exact curve at a duration you choose, which is the only reliable way to judge easing. Copy the cubic-bezier value when it feels right.
They are the coordinates of the two control handles: x1 and y1 for the first, x2 and y2 for the second. The x values are time and must stay between 0 and 1; the y values are progress and may go outside it.
Drag a handle above the top of the box so its y value goes past 1. The animation then travels past its end point and settles back, which is what reads as a spring.
Because x is time. A value outside that range would mean the animation moves backwards through time, which is not something a timing function can express.
Both start and end slowly, but ease accelerates faster at the start and is the browser default for transitions. ease-in-out is symmetrical, which suits movements that should feel balanced.
Something that starts fast and ends slow, close to ease-out, for anything entering the screen. It feels responsive because the element reacts immediately and settles gently.
Yes. The same value goes in animation-timing-function, and it also works in the shorthand for both transition and animation.
Yes. The easing option there accepts the same cubic-bezier string, so the value copies across without changes.
Yes, completely free with no sign-up.
Build frosted glass panels with backdrop-filter, previewed on real backdrops.
Open ToolBuild layered CSS box shadows with a live preview, then copy them as plain CSS or a Tailwind arbitrary value.
Open ToolCSS gradient generator with Tailwind output. Design linear and radial gradients visually, then copy production-ready CSS or Tailwind classes.
Open Tool