CSS Bulanıklaştırma ve Filter: blur(), grayscale, b…

Q: CSS'te bir element nasıl bulanıklaştırılır?

filter: blur(5px); kullan. Uzunluk bulanıklık yarıçapıdır: 0 nettir ve daha büyük değerler daha bulanıktır. Elementi ve metni ile resimleri dahil içindeki her şeyi bulanıklaştırır.

Q: Bir elementin arkasındaki arka plan nasıl bulanıklaştırılır?

Elemente rgb(255 255 255 / 0.5) gibi kısmen saydam bir arka planla birlikte backdrop-filter: blur(10px); ver. Elementin kendi içeriği net kalır, arkasındaki her şey bulanıklaşır: buzlu cam efekti.

Q: drop-shadow() ile box-shadow arasındaki fark nedir?

box-shadow her zaman elementin dikdörtgen kutusunu takip eder. filter: drop-shadow() ise bir PNG'nin ya da SVG'nin saydam alanları dahil görünür şekli takip eder, bu yüzden bir ikonun gölgesi ikonun ana hatlarına sahip olur.

Q: CSS'te bir resim siyah beyaz nasıl yapılır?

filter: grayscale(100%); (ya da grayscale(1)) kullan. Rengi geri getirmek için bir transition ve hover'da filter: grayscale(0) ekle.

Q: Aynı anda birkaç filter kullanabilir miyim?

Evet, onları boşlukla ayırarak listele: filter: grayscale(1) brightness(1.2) blur(1px);. Sırayla uygulanırlar, bu yüzden sıra sonucu değiştirebilir. İkinci bir filter bildirimi ilkinin yerini alır.

Bir elementi bulanıklaştır

filter: blur() bir uzunluk, yani bulanıklık yarıçapını alır. Ne kadar büyükse element o kadar bulanık olur:

<!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 yalnızca resimlerde değil her elementte çalışır: bulanıklaştırılmış bir div metnini, kenarlığını ve çocuklarını da bulanıklaştırır. Bulanıklaştırılmış resimlerdeki yumuşak kenarlara dikkat et: bulanıklık resmi dışarı doğru yayar ve çevresindeki saydam alanı karıştırır. Çözüm aşağıda, "Bulanık kenar sorunu" başlığı altında.

Arka planı bulanıklaştır: backdrop-filter

Bir elementin arkasındakini (bir fotoğrafın ya da sayfanın üzerindeki buzlu cam panel) bulanıklaştırmak için backdrop-filter kullan. Elementin kendi içeriği net kalır. Bulanıklığın görünmesi için yarı saydam bir arka plan gerekir:

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

Çizgiler ve daireler panelin çevresinde net, arkasında bulanık; panelin metnine ise dokunulmamış. Metni okunaklı tut: arka plan rengindeki daha açık ya da daha koyu bir ton kalabalık resimlerde yardımcı olur.

Bütün filter fonksiyonları, canlı

Herhangi bir kaydırıcıyı hareket ettir. Resmin altındaki satır, kopyalamaya hazır tam filter değeridir:

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

Yalnızca nötr değerinden uzaklaştırdığın fonksiyonlar yazılır; bu, değeri kısa tutar. brightness(1) ya da blur(0px) hiçbir şey değiştirmez, bu yüzden onları listelemenin bir nedeni yoktur.

Filter fonksiyonları

Fonksiyon	Nötr değer	Ne yapar	Örnek
`blur(r)`	`0`	r yarıçaplı Gauss bulanıklığı	`blur(4px)`
`brightness(n)`	`1`	1'in altında daha koyu, üstünde daha parlak	`brightness(0.7)`
`contrast(n)`	`1`	1'in altında daha düz, üstünde daha keskin	`contrast(1.3)`
`grayscale(n)`	`0`	1 (ya da 100%) tamamen gri	`grayscale(100%)`
`sepia(n)`	`0`	sıcak kahverengi ton	`sepia(0.6)`
`saturate(n)`	`1`	0 gri, 1'in üstü daha canlı	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	her tonu renk çarkında kaydırır	`hue-rotate(90deg)`
`invert(n)`	`0`	1 tam bir renk negatifi	`invert(1)`
`opacity(n)`	`1`	`opacity` özelliği gibi	`opacity(0.5)`
`drop-shadow(x y blur color)`		şekli takip eden bir gölge	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Sayılar yüzde de olabilir (grayscale(100%), grayscale(1)'e eşittir). Birkaç fonksiyon boşlukla ayrılarak tek bir değere girer ve sırayla uygulanır: filter: grayscale(1) sepia(1) kahverengi bir ton verir, sepia(1) grayscale(1) ise düz gri olur.

drop-shadow şekli takip eder

box-shadow her zaman bir dikdörtgendir (en fazla yuvarlak köşeli). drop-shadow() ise görünür piksellerden çizilir, bu yüzden saydam bir ikon, ikonun ana hatlarına sahip bir gölge alır:

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

İlk yıldız görünmez sınırlayıcı kutusundan kare bir gölge düşürüyor. İkincisi yıldız şeklinde bir gölge düşürüyor. box-shadow'dan farklı olarak drop-shadow()'un spread değeri ve inset'i yoktur; bunları box-shadow sayfası anlatıyor.

Bulanık kenar sorunu

Bulanıklaştırılmış bir resim kenarlarında solar, çünkü bulanıklık çevresindeki saydam pikselleri içeri çeker. Keskin bir kenar tutmak için (örneğin bulanık bir hero arka planı için) resmi overflow: hidden olan bir kapsayıcıya koy ve yumuşak kenar kesilsin diye resmi biraz büyüt:

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

filter ile hover efektleri

filter'a transition verilebilir, bu yüzden griden renge geçen bir logo duvarı ya da hover'a kadar soluk duran bir kart iki kuraldır:

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

Bir karonun üzerine gel (ya da Tab ile ona git), rengi belirir.

Bilmekte fayda var

Performans. Büyük alanlardaki büyük bulanıklık yarıçapları, özellikle hareket eden ya da kayan elementlerdeki backdrop-filter, en pahalı olanlardır. Bir telefonda test et.
Okunabilirlik. İnsanların okuması gereken metni asla bulanıklaştırma ve buzlu bir panelin üzerindeki metnin kontrastını kontrol et.
İstifleme. none dışındaki her filter, tıpkı transform gibi yeni bir stacking context oluşturur ve position: fixed torunları için kapsayıcı blok olur.

Sık yapılan hatalar

filter: blur(5). Yarıçapın birimi olmalıdır: blur(5px).
Buzlu bir panel için filter: blur() kullanmak. Panelin kendi metnini bulanıklaştırır. Saydam bir arka planla backdrop-filter kullan.
Hiçbir şey göstermeyen bir backdrop-filter. Elementin arka planı en azından kısmen saydam olmalı ve arkasında bir şey bulunmalıdır.
İki filter bildirimi. İkincisi ilkinin yerini alır. Bütün fonksiyonları tek bir değere koy.
Saydam ikonlarda kutu şeklinde gölgeler. box-shadow yerine filter: drop-shadow() kullan.

Sıkça Sorulan Sorular

CSS'te bir element nasıl bulanıklaştırılır?

filter: blur(5px); kullan. Uzunluk bulanıklık yarıçapıdır: 0 nettir ve daha büyük değerler daha bulanıktır. Elementi ve metni ile resimleri dahil içindeki her şeyi bulanıklaştırır.

Bir elementin arkasındaki arka plan nasıl bulanıklaştırılır?

Elemente rgb(255 255 255 / 0.5) gibi kısmen saydam bir arka planla birlikte backdrop-filter: blur(10px); ver. Elementin kendi içeriği net kalır, arkasındaki her şey bulanıklaşır: buzlu cam efekti.

drop-shadow() ile box-shadow arasındaki fark nedir?

box-shadow her zaman elementin dikdörtgen kutusunu takip eder. filter: drop-shadow() ise bir PNG'nin ya da SVG'nin saydam alanları dahil görünür şekli takip eder, bu yüzden bir ikonun gölgesi ikonun ana hatlarına sahip olur.

CSS'te bir resim siyah beyaz nasıl yapılır?

filter: grayscale(100%); (ya da grayscale(1)) kullan. Rengi geri getirmek için bir transition ve hover'da filter: grayscale(0) ekle.

Aynı anda birkaç filter kullanabilir miyim?

Evet, onları boşlukla ayırarak listele: filter: grayscale(1) brightness(1.2) blur(1px);. Sırayla uygulanırlar, bu yüzden sıra sonucu değiştirebilir. İkinci bir filter bildirimi ilkinin yerini alır.

İlgili kavramlar