İçeriğe geç
LibraryCSS
mix-blend-modeİleri103 efektte kullanılıyor

Karışım modlarıyla katman birleştirme

Karışım modları, üstteki katmanın piksellerini alttakiyle sabit bir formüle göre birleştirir. Normalde üst katman alttakini örter; multiply uygularsan iki rengin çarpımı, screen uygularsan tersinin çarpımının tersi, difference uygularsan mutlak farkı çizilir. Bu, Photoshop katman modlarının tarayıcıdaki karşılığıdır ve saf CSS ile yapılabilecek en güçlü görsel işlemlerden biridir.

İki ayrı özellik vardır. mix-blend-mode bir elemanı arkasındaki *her şeyle* karıştırır. background-blend-mode ise aynı elemanın kendi arka plan katmanlarını (birden fazla background-image ve background-color) birbirleriyle karıştırır. Rehber ikisinin farkını, yığın bağlamı kurallarını ve pratik kalıpları anlatıyor.

Modlar ve ne işe yaradıkları

On altı mod vardır ama günlük işte beş tanesi yeter. multiply sonucu her zaman koyulaştırır — beyaz pikselleri şeffaf gibi davrandırdığı için beyaz zeminli logoları ve dokuları yerleştirmede kullanılır. screen tam tersini yapar, açar; siyah pikselleri şeffaflaştırdığı için siyah zeminli ışık, alev ve duman görüntülerini bindirmede idealdir.

overlay ve soft-light alttaki katmanın açıklığına göre karar verir: koyu bölgeleri koyulaştırır, açık bölgeleri açar. Bu, kontrast eklemenin ve doku bindirmenin en doğal yoludur. difference iki rengin farkını alır; üstteki beyazsa alttakinin tam tersini verir. Zemine göre otomatik ters renk alan metin, imleç ve sürgü göstergeleri bu modla yazılır.

color, hue, saturation ve luminosity modları renk ile parlaklığı ayırır. luminosity üsttekinin parlaklığını, alttakinin rengini kullanır — duotone görsel efektinin temeli budur.

cssdifference ile zemine göre ters renk alan metin
.sahne {
  position: relative;
  isolation: isolate;            /* karışım sahnenin dışına taşmasın */
  background: linear-gradient(90deg, #0f172a 50%, #e2e8f0 50%);
}

.ters-yazi {
  color: #fff;
  mix-blend-mode: difference;    /* koyu zeminde beyaz, açık zeminde koyu görünür */
}
cssbackground-blend-mode ile duotone görsel
.duotone {
  aspect-ratio: 16 / 9;
  background-image:
    linear-gradient(#1d4ed8, #0ea5e9),
    url("/kapak.jpg");
  background-size: cover;
  background-position: center;
  /* Üstteki gradyanın rengi, alttaki görselin parlaklığı */
  background-blend-mode: color;
}

isolation ve yığın bağlamı

mix-blend-mode elemanı, kendi yığın bağlamındaki *arkasındaki her şeyle* karıştırır. Yığın bağlamı sınırlanmazsa bu "her şey" sayfanın kök arka planına kadar gider ve efekt beklenmedik yerlere taşar. Karışan katmanın altındaki gradyanın da sayfanın gövde rengiyle karıştığını görürsün.

isolation: isolate bunu çözer. Bir elemana yazıldığında o eleman yeni bir yığın bağlamı açar ve içindeki karışım modları o bağlamın dışına çıkamaz. Karışım kullanan her sahnenin dış kabına bu bildirimi yazmak, sürprizleri baştan keser.

Aynı etkiyi transform, filter, opacity: 0.99 veya will-change da yaratır — hepsi yığın bağlamı açar. Ama isolation bunu yan etkisiz yapan tek bildirimdir; diğerleri render davranışını da değiştirir.

Dikkat edilecek ikinci nokta: karışan eleman bir yığın bağlamının içine girdiğinde artık o bağlamın dışındaki kardeşleriyle karışamaz. Bu bazen istenen davranış, bazen de "efektim aniden durdu" şikâyetinin sebebidir.

<div class="kap">
  <img class="gorsel" src="/kapak.jpg" alt="" />
  <div class="renk-katman"></div>
</div>
cssSahneyi izole et, karışımı içeride tut
.kap {
  position: relative;
  isolation: isolate;            /* karışım sayfanın geri kalanına sızmasın */
  overflow: hidden;
  border-radius: 1rem;
}

.gorsel { display: block; width: 100%; }

.renk-katman {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  mix-blend-mode: screen;        /* görselin açık bölgelerini renklendirir */
  pointer-events: none;
}

Pratik kalıplar

Metnin içinde görsel göstermek en sevilen kalıptır: koyu bir arka plan üzerine beyaz metin koyup metne mix-blend-mode: multiply uygularsan harflerin içinden alttaki görüntü görünür. Ters yönde de çalışır — açık zeminde siyah metne screen uygulamak aynı sonucu verir.

Işık ve parıltı bindirmede screen vazgeçilmezdir. Siyah zeminli bir parıltı görüntüsünü ya da radyal gradyanı screen ile bindirdiğinde siyah bölgeler tamamen kaybolur, sadece ışık kalır. Aynı işi opacity ile yapmaya çalışmak parıltıyı soldurur ve gri bir bulanıklık bırakır.

Gürültü ve doku eklemek için overlay ya da soft-light kullanılır. Düz gradyanların bantlanmasını gizlemenin en pratik yolu, üstüne çok düşük opaklıkta bir gürültü katmanını overlay ile bindirmektir.

Performans tarafında karışım modları boyama aşamasında çalışır ve elemanı ayrı bir katmana zorlar. Statik kullanımda maliyeti düşüktür; ama karışan bir elemanı animasyonlamak her karede yeniden karıştırma demektir. Karışım kullanan sahnelerde animasyonu mümkünse karışmayan bir kardeş katmana taşı.

cssHarflerin içinden görünen görsel
.gorselli-baslik {
  position: relative;
  isolation: isolate;
  background: url("/doku.jpg") center / cover;
}

.gorselli-baslik h2 {
  margin: 0;
  padding: 3rem 1rem;
  text-align: center;
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 800;
  color: #fff;
  background: #0f172a;
  mix-blend-mode: multiply;      /* beyaz harfler saydamlaşır, zemin koyu kalır */
}

Katalogdan canlı örnekler

Aşağıdakiler mix-blend-mode 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.

mix-blend-mode kullanan 103 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
mix-blend-modeChrome 41+, Firefox 32+, Safari 8+, Edge 79+Ayrı ayrı modların desteği aynıdır; `plus-lighter` yalnızca Chrome 92+ ve Safari 13.1+.
background-blend-modeChrome 35+, Firefox 30+, Safari 8+Aynı elemanın kendi arka plan katmanlarını karıştırır; birden fazla background-image gerektirir.
isolation: isolateChrome 41+, Firefox 36+, Safari 8+Karışımı sınırlamanın yan etkisiz yolu. Desteklenmezse transform ile aynı sonuç elde edilir.

Yaygın hatalar

  • isolation yazılmadığı için efektin taşması

    Karışım, elemanın yığın bağlamındaki her şeyle çalışır ve sınır yoksa sayfa gövdesine kadar gider. Sahnenin dış kabına isolation: isolate yaz.

  • Beyaz zemin bekleyip şeffaf zemin bulmak

    multiply beyazı, screen siyahı saydamlaştırır — ama gerçekten saydam (alpha 0) pikseller bu modlarda farklı davranır. Karıştırılacak katmanın zemini opak olmalı.

  • Karışan elemanı animasyonlamak

    Her karede yeniden karıştırma hesabı yapılır ve efekt hızla pahalılaşır. Hareketi karışmayan bir kardeş katmana taşımak aynı görüntüyü çok daha ucuza verir.

  • position: fixed ile birleştirmek

    Karışan eleman sabit konumlandırılırsa yığın bağlamı beklenmedik biçimde değişir ve karışım kaybolabilir. Sabit katmanlarda absolute + sarmalayıcı kalıbını tercih et.

  • Kontrastı karışıma emanet etmek

    difference ve exclusion arkadaki içeriğe göre renk üretir; içerik değiştiğinde metin okunmaz olabilir. Anlam taşıyan metinde karışımı süs olarak kullan, kontrastı ayrı garanti et.

Sıkça sorulan sorular

mix-blend-mode ile background-blend-mode farkı nedir?
mix-blend-mode elemanın tamamını arkasındaki diğer elemanlarla karıştırır. background-blend-mode ise elemanın dışına hiç çıkmaz; yalnızca o elemanın kendi arka plan katmanlarını (birden fazla background-image ve background-color) birbiriyle karıştırır. Duotone görsel için ikincisi, katmanlı sahne için birincisi kullanılır.
Karışım efektim neden tüm sayfayı etkiliyor?
Çünkü karışım yığın bağlamı sınırına kadar gider ve sınır yoksa bu sınır sayfanın kökü olur. Sahneyi saran elemana isolation: isolate yazarak karışımı o kabın içinde tutabilirsin.
Hangi modu ne zaman kullanmalıyım?
Koyulaştırmak ve beyaz zemini yok etmek için multiply, açmak ve siyah zemini yok etmek için screen, kontrast eklemek için overlay veya soft-light, zemine göre otomatik ters renk için difference, duotone için color ya da luminosity.
Karışım modları performansı etkiler mi?
Statik kullanımda maliyeti kabul edilebilir; boyama aşamasında bir kez hesaplanır. Karışan elemanı animasyonlamak ya da kaydırma sırasında sürekli değişen bir arka planla karıştırmak ise her karede yeniden hesap demektir ve mobilde hissedilir.
Karışım modu metnin erişilebilirliğini bozar mı?
Bozabilir. difference ve exclusion gibi modlarda metin rengi alttaki içeriğe göre değişir; arka plan değiştiğinde kontrast oranı düşebilir. Kritik metinlerde karışımı süs olarak kullan ve okunurluğu ayrı bir taban katmanla garanti et.

İlgili rehberler

Son güncelleme:

Tüm rehberler