Skip to content
Ease

Design springs and easing curves. Export pure CSS.

Springs ship as linear(). How it works

Preview

Publish changes?

Your edits will be visible to everyone.

CancelPublish

Curve

Spacing, frame by frame50 frames @ 60fps

Each tick is where the element sits on one frame. Bunched ticks are slow, spread ticks fast.

0.30

Overshoots, then settles.

0.50 s

Settles in 819 ms, the exported duration.

Stiffness and damping

Mass is fixed at 1; only the ratio matters.

Recent

Curves you settle on are kept here, in this browser, so you can return to them.

Export

±0.005
:root {
  --ease-custom: linear(0, 0.0068 1.17%, 0.0257 2.33%, 0.0595 3.67%, 0.1095 5.17%, 0.2194 7.83%, 0.5928 16%, 0.6981 18.67%, 0.7886 21.33%, 0.8591 23.83%, 0.9195 26.5%, 0.968 29.33%, 1.0025 32.17%, 1.0355 37%, 1.046 42.83%, 1.0026 70.5%, 1);
  --ease-custom-duration: 819ms;
}

.element {
  transition: transform var(--ease-custom-duration) var(--ease-custom);
}

/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-custom: ease-out; }
}

17 stops · 222 chars · max error 0.0044