CSS blur và filter: blur(), grayscale, brightness

Làm mờ một phần tử

filter: blur() nhận một độ dài, là bán kính làm mờ. Giá trị càng lớn, phần tử càng mờ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

filter dùng được trên mọi phần tử, không chỉ ảnh: một div bị làm mờ thì chữ, viền và các phần tử con của nó cũng mờ theo. Để ý phần viền mềm của các ảnh bị làm mờ: hiệu ứng blur lan bức ảnh ra ngoài và trộn với vùng trong suốt xung quanh. Cách sửa nằm ở phần "Vấn đề viền bị mờ" bên dưới.

Làm mờ phần nền: backdrop-filter

Để làm mờ những gì nằm phía sau một phần tử (một tấm kính mờ đặt trên ảnh hoặc trên trang), dùng backdrop-filter. Nội dung của chính phần tử vẫn sắc nét. Nó cần một nền nhìn xuyên qua được để thấy hiệu ứng mờ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

Các sọc và hình tròn sắc nét ở xung quanh tấm kính và bị làm mờ ở phía sau nó, còn chữ trên tấm kính không bị ảnh hưởng. Hãy giữ cho chữ dễ đọc: một lớp màu sáng hơn hoặc tối hơn trong màu nền sẽ giúp ích trên những bức ảnh rối mắt.

Mọi hàm filter, chạy trực tiếp

Kéo bất kỳ thanh trượt nào. Dòng dưới ảnh là giá trị filter chính xác, sẵn sàng để sao chép:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Chỉ những hàm bạn đã kéo khỏi giá trị trung tính mới được ghi ra, giúp giá trị ngắn gọn. brightness(1) hay blur(0px) không thay đổi gì, nên không cần liệt kê chúng.

Các hàm filter

Các con số cũng có thể viết dưới dạng phần trăm (grayscale(100%) bằng grayscale(1)). Nhiều hàm có thể đặt trong một giá trị, cách nhau bằng dấu cách, và được áp dụng theo thứ tự: filter: grayscale(1) sepia(1) cho ra tông nâu, còn sepia(1) grayscale(1) lại thành màu xám trơn.

drop-shadow bám theo hình dạng

box-shadow luôn là hình chữ nhật (cùng lắm là bo góc). drop-shadow() được vẽ từ các pixel nhìn thấy được, nên một biểu tượng trong suốt sẽ có bóng mang đúng đường viền của biểu tượng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

Ngôi sao đầu tiên đổ bóng vuông từ hộp bao vô hình của nó. Ngôi sao thứ hai đổ bóng hình ngôi sao. Khác với box-shadow, drop-shadow() không có giá trị spread và không có inset; trang box-shadow trình bày những giá trị đó.

Vấn đề viền bị mờ

Ảnh bị làm mờ sẽ nhạt dần ở viền, vì hiệu ứng blur kéo các pixel trong suốt xung quanh vào. Để giữ viền sắc (ví dụ cho ảnh nền hero bị làm mờ), đặt ảnh trong một container có overflow: hidden và phóng to ảnh lên một chút để phần viền mềm bị cắt đi:

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

Hiệu ứng hover với filter

filter có thể dùng với transition, nên một bức tường logo chuyển từ xám sang màu hay một thẻ mờ cho đến khi được hover chỉ cần hai quy tắc:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

Di chuột lên (hoặc nhấn Tab tới) một ô và màu của nó hiện dần ra.

Điều nên biết

• Hiệu năng. Bán kính làm mờ lớn trên vùng rộng tốn tài nguyên nhất, đặc biệt là backdrop-filter trên các phần tử di chuyển hoặc cuộn. Hãy thử trên điện thoại.
• Khả năng đọc. Đừng bao giờ làm mờ chữ mà người dùng cần đọc, và kiểm tra độ tương phản của chữ trên tấm kính mờ.
• Ngữ cảnh xếp chồng. Mọi filter khác none đều tạo một stacking context mới và trở thành khối chứa cho các phần tử con position: fixed, giống transform.

Lỗi thường gặp

• filter: blur(5). Bán kính cần có đơn vị: blur(5px).
• Dùng filter: blur() cho tấm kính mờ. Nó làm mờ cả chữ của chính tấm kính. Hãy dùng backdrop-filter với một nền trong suốt.
• backdrop-filter không hiện gì. Nền của phần tử phải trong suốt ít nhất một phần, và phải có thứ gì đó nằm phía sau nó.
• Hai khai báo filter. Khai báo thứ hai thay thế khai báo đầu tiên. Hãy đặt mọi hàm trong một giá trị.
• Bóng hình hộp trên biểu tượng trong suốt. Dùng filter: drop-shadow() thay cho box-shadow.