Design Atlas
한국어
↝ Motion

Blur-in

블러 인

An entrance where an element starts out of focus and sharpens into view — animating filter: blur() together with opacity.

Also known as: Blur revealDefocus transition
···
html
<div class="tile"><span>FOCUS</span></div>
css
.tile{width:min(70%,220px);aspect-ratio:16/10;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-3));
  display:grid;place-items:center;color:#fff;font:800 20px/1 sans-serif;letter-spacing:.04em;
  animation:blurin 2.6s ease-in-out infinite}
@keyframes blurin{
  0%{opacity:0;filter:blur(18px);transform:scale(1.06)}
  30%{opacity:1;filter:blur(0);transform:scale(1)}
  70%{opacity:1;filter:blur(0);transform:scale(1)}
  100%{opacity:0;filter:blur(18px);transform:scale(1.06)}
}

Animate filter: blur() from a large value like 18px down to 0, together with opacity from 0 to 1. Blur alone still shows the element's edges even while out of focus, reading as "it was already there" — pairing it with opacity is what actually makes it feel like an entrance.

Blur is an expensive filter to repaint every frame, so animating it across a large background image can drop frames. Keep it to small elements — cards, text, icons.

When to use

Use it when an image or hero text appears and you want a polished "camera focusing" feel.