CSS filter ve backdrop-filter: blur, drop-shadow ve Diğer Efektler

filter ne işe yarar?

MDN'nin filtre rehberi, eskiden siyah beyaz bir görselin üzerine gelince renkli halinin görünmesi ya da metnin okunması için arka plan görselinin bir kısmının bulanıklaştırılması gibi işlerin görsel düzenleme yazılımı ve ek HTTP istekleri gerektirdiğini hatırlatır. CSS filtreleri bu işleri tarayıcıda yapar; üstelik hazır işlenmiş görsellerin aksine duyarlıdır ve canlandırılabilir.

filter öğe çizilmeden önce uygulanır ve öğenin içeriğini, kenarlığını ve iç boşluğunu birlikte etkiler. Genellikle görsellerde kullanılsa da herhangi bir öğeye ya da sözde öğeye uygulanabilir. Değer olarak none, boşlukla ayrılmış bir veya daha fazla filtre fonksiyonu ya da url() ile bir SVG filtresine başvuru alır.

img {
  border: 5px solid yellow;
}

img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
  /* sonuç: ikinci görsel ve sarı kenarlığı yüzde 40 grileşir ve bulanıklaşır */
}

On filtre fonksiyonu ve değer aralıkları

Filtre modülü on fonksiyon tanımlar. MDN rehberindeki tablo her fonksiyon için en küçük geçerli değeri, en güçlü etkiyi veren değeri ve hiçbir değişiklik yapmayan varsayılan değeri listeler. Bu varsayılan değerler aynı zamanda canlandırmada başlangıç noktası olarak kullanılır.

Tablonun iki ayrıntısı önemlidir. Birincisi en küçük değerin altına inmek, örneğin bir fonksiyona negatif değer vermek, yalnızca o fonksiyonu değil bildirimin tamamını geçersiz kılar. İkincisi en güçlü etki değerini aşmak geçerlidir ama etkiyi artırmaz: MDN örneğinde sepia(400%) ile sepia(100%) aynı görünür. Bunun dışında MDN, aksi belirtilmedikçe yüzde alan fonksiyonların ondalık sayı da kabul ettiğini söyler: grayscale(40%) ile grayscale(0.4) aynıdır.

blur() içindeki değer Gauss fonksiyonunun standart sapmasıdır, yani ekranda kaç pikselin birbirine karışacağını belirler; değer büyüdükçe bulanıklık artar. Aynı etki bir SVG feGaussianBlur filtresiyle de elde edilebilir ve filter: url("#blur") biçiminde başvurulur. Kendi SVG filtrelerinizi yazmak bu yazının kapsamı dışında; CSS tarafında yalnızca url() ile başvurulduğunu bilmeniz yeterli.

Sıra önemlidir: filtreler yazıldığı sırayla uygulanır

filter ve backdrop-filter birden fazla fonksiyon aldığında bunları soldan sağa, yazıldıkları sırayla uygular. Her fonksiyon bir öncekinin çıktısı üzerinde çalışır. Aynı fonksiyonu birden fazla kez de yazabilirsiniz. MDN bunu bir başlık ve iki filtreyle gösterir:

h1 {
  color: midnightblue;
}

#once-ton {
  filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);
  /* önce metnin tonu döner, sonra gölge eklenir: gölge macenta kalır */
}

#once-golge {
  filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);
  /* önce gölge eklenir, sonra metin ve gölgenin tonu birlikte döner */
}

MDN bu örnekte midnightblue (#191970) rengine hue-rotate(180deg) uygulandığında metnin #252500 rengine dönüştüğünü belirtir. Ton dönüşü sRGB renk uzayında yapıldığı için yalnızca ton değil doygunluk ve açıklık değerleri de değişir: #191970 yaklaşık hsl(240deg 63.5% 26.9%) iken #252500 yaklaşık hsl(60deg 100% 7.3%) olur. Yani 240 + 180 = 420, 420 - 360 = 60 derecelik ton beklendiği gibi oluşur, fakat renk çok daha koyu görünür. Renk değerleri ve renk uzayları CSS renk değerleri yazısında anlatılıyor.

Bir başka MDN örneği aynı mantığı tekrar eden fonksiyonlarla gösterir: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 red) yazıldığında iki gölgenin rengi farklı olur, çünkü ilk gölge ton döndürmeden etkilenir, ikincisi etkilenmez. Birden çok renkli gölgeyle dış hat efekti üretmek için drop-shadow() art arda dört kez de yazılabilir.

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

İkisi de gölge çizer ama farklı şeylerin gölgesini çizer. MDN'ye göre box-shadow öğenin tüm kutusunun arkasına dikdörtgen bir gölge koyar; drop-shadow() ise görüntünün kendi şeklini, yani alfa kanalını izleyen bir gölge oluşturur. Saydam arka planlı bir PNG logo ya da bir SVG simgede box-shadow kare bir gölge verirken drop-shadow() logonun hatlarını takip eder.

drop-shadow() iki ya da üç uzunluk ve isteğe bağlı bir renk alır. İlk iki uzunluk yatay ve dikey kaydırmadır; negatif yatay değer gölgeyi sola, negatif dikey değer yukarı taşır. Üçüncü uzunluk bulanıklığın standart sapmasıdır ve negatif olamaz. Renk yazılmazsa öğenin color değeri kullanılır. box-shadow sözdizimine benzer, ancak inset anahtar sözcüğü ve yayılma (spread) değeri kullanılamaz.

.logo {
  filter: drop-shadow(16px 16px 10px black);
  /* gölge logonun saydam olmayan piksellerini izler */
}

h1.parlak {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
  /* kaydırma 0, bulanıklık 3px: metnin çevresinde macenta bir parıltı */
}

Filtreleri canlandırmak

Filtreler geçiş ve animasyonla canlandırılabilir. MDN enterpolasyon kuralını şöyle açıklar: Başlangıç ve bitiş filtre listeleri aynı uzunlukta, aynı sırada ve url() içermiyorsa her fonksiyon kendi kurallarına göre ara değerlerle hesaplanır. Listeler farklı uzunluktaysa kısa listenin sonuna, uzun listedeki eksik fonksiyonlar etkisiz başlangıç değerleriyle eklenir ve sonra yine fonksiyon fonksiyon hesaplama yapılır. Bu koşullar sağlanmazsa ayrık geçiş kullanılır, yani değer yarı yolda aniden değişir.

img {
  filter: sepia(100%);
  transition: filter 0.4s;
}

img:hover,
img:focus {
  filter: none;
  /* sonuç: üzerine gelince sepyadan tam renge yumuşakça geçer */
}

.kart {
  filter: grayscale(100%);
  transition: filter 0.4s;
}

.kart:hover {
  filter: grayscale(0%) brightness(110%);
  /* kısa listeye brightness(1) eklenmiş gibi hesaplanır */
}

İkinci örnekte başlangıç listesinde tek fonksiyon, bitişte iki fonksiyon var. Kural gereği başlangıç grayscale(100%) brightness(1) olarak tamamlanır; brightness için etkisiz değer 1 ya da yüzde 100 olduğundan parlaklık 1'den 1,1'e, gri tonlama yüzde 100'den yüzde 0'a doğru ilerler. Başlangıç grayscale(100%) brightness(1), bitiş brightness(1.1) grayscale(0%) olsaydı listeler aynı uzunlukta ama farklı sırada olduğu için ara değer hesaplanamaz ve geçiş ayrık olurdu. Bu yüzden canlandıracağınız filtrelerde fonksiyon sırasını sabit tutun. Geçiş ayrıntıları CSS transition yazısında anlatılıyor.

MDN'nin sepya örneğinde görsele tabindex="0" verildiğine de dikkat edin: img etkileşimli bir öğe olmadığı için klavye kullanıcılarının da efekti görebilmesi amacıyla odaklanabilir yapılmıştır ve kural hem :hover hem :focus için yazılmıştır.

backdrop-filter: arkadaki alanı işlemek

backdrop-filter aynı filtre fonksiyonlarını öğenin arkasında çizilen piksellere uygular. Etki arkaya uygulandığı için, görebilmeniz için öğenin ya da arka planının tamamen veya kısmen saydam olması gerekir. Opak bir arka plan rengi arkadaki her şeyi örter ve filtre çalışsa bile görünmez. Bu yüzden özellik neredeyse her zaman yarı saydam bir arka plan rengiyle birlikte kullanılır:

.cam-panel {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
  /* sonuç: panelin arkasındaki görüntü bulanık, panel içeriği net */
}

.etiket {
  background-color: rgb(255 255 255 / 10%);
  backdrop-filter: hue-rotate(240deg) blur(5px);
  /* arka planın tonu kayar ve bulanıklaşır */
}

MDN, backdrop-filter özelliğinin genellikle ön plandaki içeriği daha okunaklı yapmak için, özellikle arka plan içerikle yeterli kontrast sağlamadığında kullanıldığını belirtir. Filtre yalnızca öğenin arka planına uygulanır; öğenin kendi metni ve içeriği etkilenmez.

Backdrop root: efekt neden görünmüyor?

backdrop-filter arkadaki pikselleri sınırsız biçimde işlemez; işleme, en yakın backdrop root atasına kadar çizilen içerikle sınırlıdır. O atanın arkasındaki içerik etkilenmez. MDN aşağıdaki öğeleri backdrop root olarak sayar:

• Kök öğe (html).
• filter değeri none olmayan öğe.
• opacity değeri 1'den küçük öğe.
• mask, mask-image, mask-border ya da clip-path değeri none olmayan öğe.
• backdrop-filter değeri none olmayan öğe.
• mix-blend-mode değeri normal olmayan öğe.
• will-change ile yukarıdaki özelliklerden birini bildiren öğe.

Bunun pratik sonucu şudur: Bir üst öğeye opacity: 0.9 verirseniz o öğe backdrop root olur ve içindeki bir çocuğun backdrop-filter efekti yalnızca ebeveyn ile çocuk arasındaki içeriği bulanıklaştırır, ebeveynin arkasındaki sayfa arka planını değil. MDN bunun, özellik doğru yazıldığı halde görünür bir etki yokmuş gibi görünmesinin yaygın bir nedeni olduğunu vurgular. Bulanıklığı sayfa arka planına kadar uzatmak istiyorsanız saydamlığı ebeveyn yerine o öğenin arka plan rengine (rgb(... / 90%)) taşımak bu sınırı kaldırır.

/* sorunlu: ebeveyn backdrop root olur */
.menu-kapsayici {
  opacity: 0.9;
}

.menu-kapsayici .cam {
  backdrop-filter: blur(10px);
  /* yalnızca kapsayıcının içindeki içeriği bulanıklaştırır */
}

/* düzeltilmiş: saydamlık arka plan rengine taşındı */
.menu-kapsayici-2 {
  background-color: rgb(20 20 20 / 90%);
}

Yan etkiler: stacking context ve containing block

Filtreler yalnızca görünümü değiştirmez. MDN'nin yığın bağlamı rehberine göre filter ya da backdrop-filter değeri none olmayan bir öğe yeni bir yığın bağlamı (stacking context) oluşturur. Kapsayıcı blok rehberine göre de bu öğe, içindeki position: absolute ve position: fixed öğeler için kapsayıcı blok olabilir. MDN, filter özelliğinin kapsayıcı blok oluşturması konusunda tarayıcılar arasında tutarsızlık olduğunu ayrıca not eder.

Bu davranış özellikle tam sayfa kaplamalarda sürpriz yaratır: Sayfanın kök kapsayıcısına bir efekt için filter verirseniz içerideki sabit konumlu bir modal artık görünüm alanına göre değil o kapsayıcıya göre yerleşebilir. Aynı durum transform için de geçerlidir; transform yazısında ve z-index yazısında ayrıntılar var.

Kısa bir giriş: mix-blend-mode

mix-blend-mode, öğenin içeriğinin aynı yığın bağlamı içinde arkasında çizilen içerikle nasıl karışacağını belirler. Bir filtre değil bir karışım modudur, ama görsel efektlerde sık birlikte kullanılır. Öğenin kendi arka plan katmanlarını birbiriyle karıştırmak için ise background-blend-mode kullanılır.

.daire {
  mix-blend-mode: screen;
  position: absolute;
}

.grup {
  isolation: isolate;
  position: relative;
  /* dairelerin sayfa arka planıyla değil yalnızca birbirleriyle karışmasını sağlar */
}

isolation: isolate yeni bir yığın bağlamı oluşturur ve karışımı o grubun içiyle sınırlar. MDN'deki örnekte bu satır olmadan arka plan renginin de karışıma katıldığı belirtilir. normal dışındaki bir mix-blend-mode değeri de öğeyi hem yığın bağlamı hem backdrop root yapar.

Sık yapılan hatalar

• Negatif değer: blur(-2px) ya da brightness(-1) tüm filter bildirimini geçersiz kılar; diğer fonksiyonlar da uygulanmaz.
• blur() içinde yüzde: blur(10%) geçersizdir; uzunluk kullanın.
• Opak arka planlı backdrop-filter: Arkadaki alan görünmediği için etki fark edilmez; yarı saydam renk kullanın.
• Ebeveyndeki opacity: Üst öğe backdrop root olur ve bulanıklık sayfa arka planına ulaşmaz.
• Logoya box-shadow vermek: Saydam kenarlı görsellerde dikdörtgen gölge çıkar; drop-shadow() kullanın.
• Canlandırırken sırayı değiştirmek: Başlangıç ve bitiş listelerinde fonksiyon sırası farklıysa geçiş ayrık olur.
• Beklenmeyen fixed davranışı: filter verilen bir ata, içerideki fixed öğenin yerleşimini değiştirebilir.

Sık Sorulan Sorular

filter: opacity() ile opacity özelliği aynı mı?

İkisi de saydamlık uygular ve 0% tamamen saydam, 100% değişiklik yok demektir. Fark, opacity() fonksiyonunun bir filtre listesinin parçası olması ve diğer filtrelerle birlikte sırayla uygulanmasıdır.

Arka plan görselini bulanıklaştırıp metni net tutabilir miyim?

Evet. Metni içeren öğeye yarı saydam bir arka plan rengi ve backdrop-filter: blur() verin. Filtre yalnızca öğenin arkasındaki alana uygulanır, metin etkilenmez. Görselin kendisine filter verirseniz o öğenin içindeki her şey bulanıklaşır.

backdrop-filter her tarayıcıda çalışır mı?

Tarayıcı desteği için MDN sayfasındaki uyumluluk tablosuna bakın. Desteklenmeyen ortamlarda bile okunabilirlik bozulmasın diye yarı saydam arka plan rengini yeterli kontrastla seçmek iyi bir yedek davranıştır.

Filtreler performansı etkiler mi?

MDN filtreler için sayısal bir performans bilgisi vermez. Animasyonlarda genel öneri, kutu modelini değiştiren özellikler yerine yerleşimi etkilemeyen özellikleri canlandırmaktır; ölçüm için Core Web Vitals rehberine bakabilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · border-radius ve box-shadow · CSS renk değerleri · CSS transform · CSS transition · z-index ve stacking context · background özellikleri