Blur in

Quick implementation

.blur-in {
  animation: blur-in 0.7s ease-out both;
}

@keyframes blur-in {
  from {
    filter: blur(12px);
    opacity: 0;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blur-in {
    animation: none;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a page entrance animation.

Goal: A blur-in reveal effect that transitions elements from blurred
and transparent to sharp and fully visible — no JavaScript required.

Technical constraints:
- Use @keyframes blur-in with filter: blur(12px) and opacity: 0 at
  the start, transitioning to filter: blur(0) and opacity: 1.
- Set animation: blur-in 0.7s ease-out both so the final state
  persists after the animation completes.
- Use oklch() for all color values in supporting styles.
- Include @media (prefers-reduced-motion: reduce) to disable the
  animation entirely for users who prefer less motion.

Framework variant (pick one):
A) Vanilla CSS — single .blur-in utility class applied directly in HTML.
B) React component — accept a delay prop (in seconds) for staggered
   entrance of multiple elements.

Edge cases to handle:
- Staggered lists: apply animation-delay incrementally per child so
  items reveal sequentially rather than all at once.
- will-change: filter — add only when profiling shows jank; removing
  it avoids unnecessary compositing layers.
- Elements that are initially hidden should not flash before the
  animation starts — the both fill-mode handles this.

Return CSS only.

Why this matters in 2026

Blur entrance animations create a cinematic depth-of-field effect that has become a hallmark of polished, modern UI. Rather than a simple fade, the blur-to-sharp transition mimics how a camera lens focuses, giving content a physical weight and presence. Used sparingly on hero text, cards, or modals, it elevates the perceived quality of an interface without adding any JavaScript payload.

The logic

The effect combines filter: blur() with opacity. At the start of the keyframe the element is invisible and maximally blurred; at the end it is fully opaque and sharp. The blur() radius controls intensity — 12px is dramatic but not excessive. Using ease-out timing means the blur dissipates quickly at first then settles gently, which feels natural to the eye. The both fill-mode ensures the element stays hidden before the animation starts and remains visible after it ends, avoiding a flash on load.

Accessibility & performance

filter: blur() is rendered on the GPU compositor in modern browsers, but it is not free — large blur radii on large elements can cause frame drops on lower-end devices. Keep the duration short (0.5–0.9s) and the blur radius modest. Add will-change: filter only if you measure jank; unnecessary promotion wastes GPU memory. Always include @media (prefers-reduced-motion: reduce) to disable the animation — vestibular disorders and motion sensitivity make entrance animations a real barrier for some users.