Blur to mask a crossfade

If a crossfade reads as two objects, blur them 2px in transit.

Emil Kowalski@emilkowalski
If you tried a few different easings and timings for your animation and something about it still feels off, try adding a bit of blur to mask those imperfections. Here's a before/after using `filter: blur(2px)` (+ a subtle scale down on press):

Shown in demo 1: the copy → check swap at 2px, with the press scale.

Mar 2, 2026View on X ↗
Emil Kowalski@emilkowalski
Been adding 4px of blur to animations recently and I kinda like it?

Shown in demo 2: drag Blur from 0 to 4px and past it, or freeze the swap mid-way.

Mar 29, 2024View on X ↗
Emil Kowalski@emilkowalski
An intro animation I made a while back at Linear. It consists of a 4px blur, Y transform, and a subtle stagger.

Shown in demo 3: type a headline and replay it with and without the 4px.

Nov 10, 2025View on X ↗

From emil-design-eng.

Copy to check

Press both copy buttons, then try slow motion.

Crossfade onlyBad
npm install sonner

opacity + scale · 200ms
+ blur(2px)Good
npm install sonner

opacity + scale + blur(2px) · 200ms
.copy-button .icon {
  grid-area: 1 / 1;
  transition:
    opacity 200ms ease,
    filter 200ms ease,
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.copy-button .icon[data-hidden] {
  opacity: 0;
  filter: blur(2px);
  transform: scale(0.5);
}

How much blur

Drag Blur, then press Play. Freeze stops it mid-swap.

No blurBad
filter: none
blur(2px)Good
filter: blur(2px)

Intro text: blur, Y, stagger

Edit the headline, then press Replay.

Y + opacityFlat

Plan and build products

translateY(8px) · opacity
+ blur(4px)Good

Plan and build products

translateY(8px) · opacity · blur(4px)

Why it matters, pros and cons

Why it matters

Mid-fade, two sharp shapes read as two objects. Blur merges them into one.

Pros

  • One more property on an existing transition.
  • Masks leftover easing and timing flaws.
  • Not movement, so reduced motion keeps it.

Cons

  • A last resort: fix easing and duration first.
  • Costly on large areas; keep it under 20px.
  • Past about 4px the content smears and disappears.