Skip to content
All designer tools

Easing Studio

cubic-bezier visual editor

ease
0,01,1

Drag the two dots to reshape the curve. Y can overshoot [0,1] for bounce/anticipation.

Live preview
translateX
scale
opacity
cssCSS
.animated {
  transition: transform 1.5s cubic-bezier(0.250, 0.100, 0.250, 1.000);
  /* or: animation-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); */
}
htmlTailwind classes
transition-transform duration-[1500ms] ease-[cubic-bezier(0.250,_0.100,_0.250,_1.000)]
csslinear() easing
.animated {
  /* linear() also expresses curves cubic-bezier() can't (bounce, multi-segment); browsers without it ignore the line and fall back safely */
  transition-timing-function: linear(0, 0.046, 0.137, 0.267, 0.409, 0.537, 0.645, 0.733, 0.802, 0.858, 0.901, 0.935, 0.96, 0.979, 0.991, 0.998, 1);
}

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Hand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

x10.250
y10.100
x20.250
y21.000
Duration1.50s

How long the demo above takes. It changes the preview only — the curve you copy is independent of duration.

Keep this curve. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free accountSign in

More designer tools

All 36 run in the tab — no account, no upload.See all