İçeriğe geç
LibraryCSS
backdrop-filterOrta88 efektte kullanılıyor

backdrop-filter ile cam efekti

backdrop-filter, elemanın *arkasında* kalan pikselleri filtreler. filter elemanın kendisini işlerken backdrop-filter onun altındaki her şeyi — arka planı, alttaki görselleri, kaydırılan içeriği — bulanıklaştırır, doygunlaştırır veya karartır. Sonuç, arkasındakini geçiren buzlu cam görünümüdür.

Bu tek özellik, işletim sistemi arayüzlerinden tanıdık cam panelleri, yapışkan başlıkları, modal arka planlarını ve bildirim kartlarını saf CSS'le mümkün kılar. Rehber doğru kalıbı, sık karşılaşılan "hiçbir şey olmuyor" durumlarını ve mobilde ödenen bedeli anlatıyor.

Cam panelin dört bileşeni

İnandırıcı bir cam paneli tek bir blur() yapmaz. Dört parça gerekir. Birincisi yarı saydam bir arka plan: backdrop-filter yalnızca arkayı işler, elemanın kendi yüzeyi opak kalırsa filtre hiç görünmez. İkincisi bulanıklık. Üçüncüsü doygunluk artışı — bulanıklaştırma renkleri ortalayıp soluklaştırdığı için saturate(160%) eklemek camın arkasındaki renklerin canlı kalmasını sağlar. Dördüncüsü ince bir kenar çizgisi: gerçek camın kenarındaki ışık kırılmasını taklit eder ve paneli zeminden ayırır.

Filtre fonksiyonları boşlukla ayrılarak zincirlenir ve soldan sağa uygulanır. blur(14px) saturate(160%) ile saturate(160%) blur(14px) farklı sonuç verir; genelde önce bulanıklaştırıp sonra doygunlaştırmak daha temiz görünür.

Yarı saydamlık oranı önemlidir. 0.04–0.12 aralığı koyu zeminlerde, 0.55–0.75 aralığı açık zeminlerde iyi çalışır. Çok saydam bırakmak metni okunmaz yapar; çok opak yapmak camın anlamını yok eder.

blur(px)
Asıl cam etkisi. 8–20 piksel arası çoğu panelde doğru; 40 pikselin üstü arkadaki içeriği tanınmaz hâle getirir ve maliyeti hızla artırır.
saturate(%)
Bulanıklaştırmanın soldurduğu renkleri geri getirir. 140–180% aralığı camın arkasındaki içeriği canlı tutar.
brightness(%) / contrast(%)
Panelin altındaki içerik çok açık ya da çok koyuysa metin kontrastını kurtarır. Açık zeminde brightness'ı hafif yükseltmek, koyu zeminde düşürmek işe yarar.
cssKoyu zemin üzerinde cam panel
.cam {
  /* Yüzey yarı saydam olmalı; opak arka planda filtre hiç görünmez */
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 1rem;
  padding: 1.25rem;

  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Açık zeminde aynı kalıp, farklı oranlarla */
.cam-acik {
  background: rgb(255 255 255 / 0.65);
  border: 1px solid rgb(255 255 255 / 0.8);
  backdrop-filter: blur(18px) saturate(140%) brightness(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(1.05);
}

filter ile farkı ve yığın bağlamı

filter: blur(10px) elemanın kendisini — metnini, çerçevesini, çocuklarını — bulanıklaştırır. backdrop-filter: blur(10px) ise elemanın içeriğine hiç dokunmaz, sadece arkasını işler. Cam panelin üstündeki yazının net kalmasının sebebi budur. İkisini karıştırıp filter yazmak, "metin de bulanık çıkıyor" şikâyetinin tek sebebidir.

backdrop-filter uygulanan eleman otomatik olarak yeni bir yığın bağlamı oluşturur. Bunun iki sonucu var: içindeki z-index: -1 değerleri artık elemanın arka planının altına inemez, ve elemanın kendisi kardeşleriyle olan sıralamada bağımsız bir katman gibi davranır. Sözde eleman katmanlarını arkaya göndermeye çalışırken bu davranış sürpriz yapar.

Ayrıca filtre yalnızca elemanın *arkasındaki boyanmış içeriği* işler. Eğer üst eleman zaten bir filtre uygulamışsa, ya da arkada boyanacak bir şey yoksa (saydam gövde, altında hiçbir şey olmayan bölüm), etki görünmez. "Kod doğru ama hiçbir şey olmuyor" durumlarının çoğu bu ikisinden biridir.

cssYapışkan başlık — altından geçen içeriği bulanıklaştırır
.baslik {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(7 9 14 / 0.72);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

/* Destek yoksa saydamlığı düşür: metin yine okunur kalsın */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .baslik { background: rgb(7 9 14 / 0.96); }
}

Performans: en pahalı CSS özelliklerinden biri

backdrop-filter her karede elemanın arkasındaki bölgeyi okuyup yeniden bulanıklaştırır. Bu, transform gibi bir kez hazırlanıp GPU'da tekrar tekrar kullanılan bir işlem değildir; kaydırma sırasında arka plan değiştiği için hesap yenilenir. Uzun listelerde her karta cam efekti vermek, orta seviye telefonlarda kaydırmayı gözle görülür biçimde takar.

Maliyeti azaltmanın üç yolu var. Birincisi bulanıklık yarıçapını düşük tutmak: 30 pikselden 12 piksele inmek işlem alanını belirgin biçimde küçültür. İkincisi cam alanını sınırlamak — tam ekran yerine yalnızca başlık şeridi ya da tek bir panel. Üçüncüsü kaydırma sırasında filtreyi devre dışı bırakmak; sabit yapışkan başlıklarda bu fark yaratır.

will-change: backdrop-filter genelde yardımcı olmaz ve fazladan katman maliyeti getirir. Gerçek kazanç, cam kullanılan eleman sayısını azaltmaktan gelir.

Erişilebilirlik açısından kritik nokta kontrasttır. Cam panelin arkasından geçen içerik değiştikçe metnin kontrast oranı da değişir; sabit bir zeminde okunaklı olan yazı, açık renkli bir görselin üstüne geldiğinde okunmaz olur. Yarı saydam katmanın altına yeterince koyu (ya da açık) bir taban rengi koymak bunu garantiler.

cssKontrast güvencesi: cam katmanın altında sabit taban
.cam-guvenli {
  position: relative;
  isolation: isolate;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Arkada ne olursa olsun metin bu tabanın üstünde okunur kalır */
.cam-guvenli::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(7 9 14 / 0.55);
  border-radius: inherit;
}

Katalogdan canlı örnekler

Aşağıdakiler backdrop-filter kullanan gerçek efektler — anlatılan teknik burada çalışır hâlde. Herhangi birine tıklayıp tam kaynağını açabilir, tarayıcı içi editörde değiştirip sonucu anında görebilirsin.

backdrop-filter kullanan 88 efektin tümü

Tarayıcı desteği

Sürüm numaraları özelliğin öneksiz ve varsayılan olarak açık hâle geldiği ilk kararlı sürümü gösterir.

ÖzellikTarayıcılarNot
backdrop-filter (öneksiz)Chrome 76+, Firefox 103+, Safari 18+, Edge 79+Firefox 103 öncesinde bayrak arkasındaydı; bugün varsayılan açık.
-webkit-backdrop-filterSafari 9+, iOS Safari 9+Safari 18 öncesi sürümlerde tek çalışan yazım. İki satırı birlikte yazmak hâlâ gerekli.
@supports ile yedekTüm modern tarayıcılarDestek yokken saydamlığı düşürüp metin okunurluğunu koruyan bir yedek yazmak şart.

Yaygın hatalar

  • Opak arka plan üzerine yazmak

    background: #0f172a gibi tam opak bir yüzey arkasını tamamen kapatır, filtre çalışsa da görünmez. Yüzey mutlaka yarı saydam olmalı.

  • filter ile karıştırmak

    filter: blur() elemanın kendi metnini de bulanıklaştırır. Cam efektinde metnin net kalması için mutlaka backdrop-filter kullanılmalı.

  • -webkit- önekini atlamak

    Safari 18 öncesi sürümler yalnızca -webkit-backdrop-filter biliyor. iOS kullanıcılarının büyük bölümünde efekt kaybolur.

  • Uzun listede her karta cam vermek

    Her kart kaydırma sırasında yeniden bulanıklaştırılır ve mobilde kare düşer. Cam efektini sabit sayıda öğeyle sınırla.

  • Kontrastı arka plana emanet etmek

    Cam panelin arkasından açık renkli bir görsel geçtiğinde metin okunmaz olur. Yarı saydam katmanın altına sabit bir taban rengi koy.

Sıkça sorulan sorular

backdrop-filter ile filter arasındaki fark nedir?
filter elemanın kendisini ve tüm çocuklarını işler; metin de bulanıklaşır. backdrop-filter yalnızca elemanın arkasında kalan pikselleri işler, elemanın içeriği net kalır. Buzlu cam efektinde her zaman backdrop-filter kullanılır.
Kodum doğru ama hiçbir bulanıklık görünmüyor, neden?
En yaygın üç sebep: elemanın arka planı tam opak, üst elemanlardan biri kendi filter bildirimi yüzünden yeni bir bağlam oluşturmuş, ya da elemanın arkasında boyanmış bir içerik yok. Yarı saydam bir background ekleyip elemanı gerçekten bir içeriğin üzerine yerleştirerek test et.
Cam efekti mobilde neden takılıyor?
backdrop-filter her karede arka bölgeyi yeniden bulanıklaştırır ve kaydırma sırasında bu hesap sürekli yenilenir. Bulanıklık yarıçapını 12-14 piksele düşürmek, cam kullanan eleman sayısını azaltmak ve efekti tam ekran yerine sınırlı bir panelde tutmak belirgin fark yaratır.
Hangi blur değeri doğru?
Panel ve başlıklar için 10–20 piksel arası doğal durur. Modal arka planı gibi arkadakinin tanınmaması gereken yerlerde 24–40 piksel kullanılır ama maliyeti hızla artar. 4 pikselin altı gözle neredeyse fark edilmez.
Destek olmayan tarayıcıda ne olur?
Bildirim yok sayılır ve eleman yarı saydam hâliyle kalır — arkası bulanık değil, net görünür. Bu genelde metnin okunmasını zorlaştırdığı için @supports ile arka plan opaklığını yükselten bir yedek yazmak gerekir.

İlgili rehberler

Son güncelleme:

Tüm rehberler