Tạo ảnh/văn bản mờ (Motion Blur) với CSS Filter

Bộ lọc Motion Blur - Microsoft Legacy Filter

Cảnh báo: Filter: Blur(...) với tham số Add, Direction, Strength là **Microsoft proprietary filter (IE 4-9)**, **đã lỗi thời**.

Tham số cũ (chỉ IE)

Thay thế hiện đại: CSS filter: blur()

Chuẩn CSS Filter Effects - chỉ hỗ trợ **Gaussian Blur (mờ đều mọi hướng)**:

.blur-standard { filter: blur(5px); }
.blur-strong { filter: blur(10px); }

Motion Blur thực sự (Directional Blur) - Hiện đại

CSS chuẩn không có directional blur tích hợp. Các giải pháp:

1. SVG Filter (feGaussianBlur + feOffset + feMerge) - Phức tạp

<svg style="display:none">
  <filter id="motion-blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10 0" result="blur"/> /* Chỉ blur ngang */
    <feOffset in="blur" dx="5" dy="0" result="offset"/>
    <feMerge>
      <feMergeNode in="offset"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

2. CSS Animation giả lập (dùng cho text/icon đơn giản)

@keyframes motion-blur-sim {
  0% { transform: translateX(0); filter: blur(0); opacity: 1; }
  50% { transform: translateX(50px); filter: blur(10px); opacity: 0.5; }
  100% { transform: translateX(100px); filter: blur(0); opacity: 0; }
}
.motion-blur-anim { animation: motion-blur-sim 1s ease-out forwards; }

3. Canvas/WebGL - Motion blur thực tế cho game/animation

Dùng requestAnimationFrame vẽ nhiều frame với alpha thấp (trails effect) hoặc shader.

Ví dụ hiện đại đơn giản

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { display: inline-block; margin: 20px; font: 30pt 'Arial Black'; color: blue; }
    .blur-gaussian { filter: blur(5px); }
    .blur-motion-sim { 
      animation: move-blur 2s infinite;
    }
    @keyframes move-blur {
      0% { transform: translateX(0); filter: blur(0); }
      50% { transform: translateX(100px); filter: blur(15px); }
      100% { transform: translateX(0); filter: blur(0); }
    }
  </style>
</head>
<body>
  <div class="demo">Bình thường</div>
  <div class="demo blur-gaussian">Gaussian Blur 5px</div>
  <div class="demo blur-motion-sim">Giả lập Motion Blur</div>
</body>
</html>

Kết luận

Không dùng Filter: Blur(Add, Direction, Strength) - IE legacy. Dùng filter: blur(px) cho Gaussian blur, SVG Filter cho directional blur, hoặc Canvas/WebGL cho hiệu ứng chuyên nghiệp.