Blur dan Filter CSS: blur(), grayscale, brightness

Memburamkan elemen

filter: blur() menerima sebuah panjang, yaitu radius blur. Makin besar nilainya, makin buram elemennya:

<!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 berfungsi pada elemen apa pun, tidak hanya gambar: div yang diburamkan juga memburamkan teks, border, dan anak-anaknya. Perhatikan tepi yang lembut pada gambar yang buram: blur menyebarkan gambar ke luar dan mencampurnya dengan area transparan di sekitarnya. Solusinya ada di bawah, di bagian "Masalah tepi yang buram".

Memburamkan background: backdrop-filter

Untuk memburamkan apa yang ada di belakang elemen (panel kaca buram di atas foto atau halaman), pakai backdrop-filter. Konten elemen itu sendiri tetap tajam. Properti ini butuh background yang tembus pandang agar blur-nya terlihat:

<!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>

Garis dan lingkaran terlihat tajam di sekitar panel dan buram di belakangnya, sementara teks panel tidak tersentuh. Jaga teks tetap terbaca: warna background yang sedikit lebih terang atau lebih gelap membantu di atas gambar yang ramai.

Setiap fungsi filter, secara langsung

Geser slider mana saja. Baris di bawah gambar adalah nilai filter yang persis, siap disalin:

<!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>

Hanya fungsi yang kamu geser dari nilai netralnya yang ditulis, supaya nilainya tetap pendek. brightness(1) atau blur(0px) tidak mengubah apa-apa, jadi tidak ada alasan untuk mencantumkannya.

Fungsi-fungsi filter

Angka juga bisa berupa persentase (grayscale(100%) sama dengan grayscale(1)). Beberapa fungsi bisa ditulis dalam satu nilai, dipisahkan spasi, dan diterapkan sesuai urutan: filter: grayscale(1) sepia(1) menghasilkan warna kecokelatan, sedangkan sepia(1) grayscale(1) berakhir abu-abu biasa.

drop-shadow mengikuti bentuk

box-shadow selalu berbentuk persegi panjang (paling banter dengan sudut membulat). drop-shadow() digambar dari piksel yang terlihat, jadi ikon transparan mendapat bayangan dengan garis bentuk ikon itu:

<!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>

Bintang pertama menghasilkan bayangan persegi dari kotak pembatasnya yang tidak terlihat. Bintang kedua menghasilkan bayangan berbentuk bintang. Berbeda dengan box-shadow, drop-shadow() tidak punya nilai spread dan tidak punya inset; halaman box-shadow membahas keduanya.

Masalah tepi yang buram

Gambar yang diburamkan memudar di tepinya, karena blur menarik piksel transparan di sekitarnya. Untuk mempertahankan tepi yang tegas (misalnya untuk background hero yang buram), taruh gambar di wadah dengan overflow: hidden dan perbesar gambarnya sedikit supaya tepi yang lembut terpotong:

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

Efek hover dengan filter

filter bisa diberi transition, jadi dinding logo yang berubah dari abu-abu ke berwarna atau kartu yang redup sampai di-hover cukup dibuat dengan dua aturan:

<!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>

Arahkan kursor (atau tekan Tab) ke sebuah petak dan warnanya muncul perlahan.

Perlu diketahui

• Performa. Radius blur yang besar pada area yang luas paling berat, terutama backdrop-filter pada elemen yang bergerak atau di-scroll. Uji di ponsel.
• Keterbacaan. Jangan pernah memburamkan teks yang perlu dibaca orang, dan periksa kontras teks di atas panel kaca buram.
• Stacking. filter apa pun selain none membuat stacking context baru dan menjadi containing block untuk turunan dengan position: fixed, seperti transform.

Kesalahan umum

• filter: blur(5). Radiusnya butuh satuan: blur(5px).
• Memakai filter: blur() untuk panel kaca buram. Teks panel itu sendiri ikut buram. Pakai backdrop-filter dengan background yang transparan.
• backdrop-filter yang tidak menampilkan apa-apa. Background elemen harus setidaknya sebagian transparan, dan harus ada sesuatu di belakangnya.
• Dua deklarasi filter. Yang kedua menggantikan yang pertama. Taruh semua fungsi dalam satu nilai.
• Bayangan berbentuk kotak pada ikon transparan. Pakai filter: drop-shadow() alih-alih box-shadow.