Blur-in
An entrance that starts hazy and transparent, then sharpens into focus as it becomes fully visible.
See it
What it is
A blur-in combines a fade with a short focus pull, the move a camera operator would call a rack focus: the element starts transparent and blurred, then resolves to full opacity and a sharp image. On the web it is usually an opacity transition paired with CSS filter: blur(). The changing detail makes the entrance feel softer than a plain fade without moving the layout.
Reach for it on hero artwork, large display type, modal backdrops, and atmospheric scene changes where a clean cut feels too hard. Keep the blur modest and the duration short so the viewer reads intentional focus, not a slow-loading image.
Gotcha: animating a large blur can be expensive because the browser must filter many surrounding pixels on every frame. Avoid it on full-screen surfaces and long paragraphs, end at filter: blur(0), and do not leave will-change applied after the entrance. Skip the blur under prefers-reduced-motion.
Ask AI for it
Give this element a CSS blur-in entrance. Start at opacity: 0 and filter: blur(12px), then animate to opacity: 1 and filter: blur(0) over 220ms with cubic-bezier(0.22, 1, 0.36, 1). Trigger it once when the element appears, remove will-change after completion, and use an opacity-only 120ms fade inside prefers-reduced-motion: reduce.