mask ile clip-path arasında hangisini seçmeliyim?

Kenar keskin ve geometrikse clip-path: daha az kod, daha geniş destek, daha ucuz işlem. Kenarın yumuşak solması, kısmi saydamlık ya da doku maskesi gerekiyorsa mask. Ayrıca clip-path kesilen alanı tıklanamaz yapar, mask yapmaz.

SVG ikonu neden CSS ile renklendiremiyorum?

img etiketiyle yüklenen SVG'nin içine CSS ulaşamaz. Çözüm SVG'yi maske olarak kullanmaktır: elemana `background: currentColor` verip `mask: url(ikon.svg) center / contain no-repeat` yazarsan renk artık CSS'ten gelir ve currentColor sayesinde metin rengini izler.

Maskeyle gerçekten delik açabilir miyim?

Evet. İki maske katmanını mask-composite: exclude ile birleştirmek, birinden diğerini çıkararak fiziksel bir delik bırakır ve arkadaki içerik delikten görünür. WebKit için aynı satırı -webkit-mask-composite: xor ile tekrarlamak gerekir.

Maske performansı düşürür mü?

Statik kullanımda maliyeti düşüktür. Animasyonlu kullanımda her karede maske birleştirme adımı tekrarlanır ve büyük yüzeylerde transform animasyonundan belirgin biçimde pahalıdır. Uzun listelerde her öğeye animasyonlu maske vermekten kaçın.

Maskelenmiş elemanın altındaki bağlantılar tıklanabilir mi?

Evet, kalır. mask yalnızca boyamayı etkiler; görünmez hâle gelen bölge fare ve dokunma olaylarını almaya devam eder. Bu genelde solan kenarlarda istenen davranıştır ama gerçekten kapatmak istiyorsan pointer-events veya clip-path gerekir.

maskİleri54 efektte kullanılıyor

mask ile maskeleme

mask, bir elemanın hangi pikselinin ne kadar görüneceğini başka bir görüntünün alfa kanalıyla belirler. Maske görüntüsünün opak olduğu yerde eleman tam görünür, saydam olduğu yerde tamamen kaybolur, aradaki değerlerde kısmen görünür. Maskenin kendisi hiçbir zaman ekrana çizilmez — yalnızca bir saydamlık haritası olarak kullanılır.

Bu, clip-path ile arasındaki temel farkı da açıklar: clip-path keskin bir sınır çizer, mask dereceli geçişe izin verir. Kenarları yavaşça solan bir liste, ortası gerçekten oyulmuş bir halka ya da tek renkle boyanabilen bir SVG ikon ancak maskeyle yapılır.

Maske görüntüsü: gradyan, SVG, PNG

mask-image üç tür kaynak kabul eder. Birincisi CSS gradyanları — linear-gradient(black, transparent) yazmak elemanın altını yavaşça soldurur. İkincisi SVG dosyası ya da satır içi data: URL'i; siyah-beyaz bir şekil maskesi bu şekilde uygulanır. Üçüncüsü alfa kanallı PNG.

Kritik ayrıntı mask-mode'dur. Varsayılan match-source, kaynağa göre karar verir: SVG <mask> elemanı için alfa, diğerleri için de alfa kullanılır. luminance moduna geçersen maskede beyaz "göster", siyah "gizle" anlamına gelir; alfa modundaysa önemli olan saydamlıktır, renk değil. Bu yüzden gradyan maskelerinde black'ten transparent'a gitmek yeterlidir; black'ten white'a gitmek alfa modunda hiçbir şey yapmaz çünkü ikisi de tam opaktır.

mask kısayolu background ile aynı yapıdadır: konum, boyut, tekrar ve kaynak aynı satırda yazılabilir. Konum ile boyut arasında eğik çizgi kullanılır: mask: url(ikon.svg) center / contain no-repeat.

cssAlt kenarı yavaşça solan liste

.solan-liste {
  max-height: 320px;
  overflow-y: auto;
  /* Alfa modunda önemli olan saydamlık: black → transparent */
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

cssSVG ikonu tek renkle boyamak

.ikon {
  display: inline-block;
  width: 20px;
  aspect-ratio: 1;
  /* Renk artık CSS'ten geliyor — SVG'nin kendi rengi önemsiz */
  background: currentColor;
  mask: url("/ikon/ok.svg") center / contain no-repeat;
  -webkit-mask: url("/ikon/ok.svg") center / contain no-repeat;
}

.ikon-mavi { color: #60a5fa; }

mask-composite ile delik açmak

Birden fazla maske katmanı virgülle yazılabilir ve mask-composite bunların nasıl birleşeceğini belirler. add (varsayılan) katmanları toplar, subtract ilkinden ikincisini çıkarır, intersect kesişimlerini alır, exclude ortak olmayan bölgeleri bırakır.

En kullanışlı olanı exclude: bir dikdörtgenden bir daireyi çıkararak gerçek bir delik açar. Bu, gradyan çerçeveler ve halka göstergeleri için ::before numarasına gerek bırakmaz; eleman fiziksel olarak ortasından oyulur ve arkasındaki içerik delikten görünür.

Aynı işi padding-box / content-box kutu değerleriyle de yapabilirsin: iki linear-gradient(#000 0 0) katmanından birini content-box, diğerini border-box referansına oturtup exclude ile birleştirmek, tam olarak dolgu kalınlığında bir çerçeve şeridi bırakır. Gradyan çerçeve yazmanın en kısa yolu budur.

WebKit tarafında bir uyumsuzluk var: -webkit-mask-composite farklı anahtar sözcükler kullanır (source-out, xor, destination-in). Öneksiz exclude yerine -webkit-mask-composite: xor yazmak gerekir; ikisini birlikte yazmak her iki motorda da doğru sonuç verir.

cssGradyan çerçeve — sözde eleman kullanmadan

.gradyan-cerceve {
  padding: 2px;                  /* çerçeve kalınlığı */
  border-radius: 1rem;
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);

  /* İki katman: biri tüm kutu, diğeri yalnızca iç alan.
     Çıkarınca geriye 2px'lik şerit kalır. */
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;   /* WebKit farklı anahtar sözcük kullanır */
}

.gradyan-cerceve > * {
  border-radius: calc(1rem - 2px);
  background: #0c1017;
}

Tekrarlayan maskeler ve animasyon

Maske görüntüsü de bir arka plan gibi döşenebilir. mask-size ile bir hücrenin boyutunu, mask-repeat ile tekrarını belirlersin. Bilet kenarındaki oyuklar, tarak kenarlı bölümler ve delikli şeritler bu şekilde yazılır: küçük bir radyal gradyanı yatayda döşemek, kenar boyunca eşit aralıklı yarım daireler oyar.

mask-position animasyonlanabilir. Maskeyi kaydırmak, elemanın altındaki içeriğin sırayla açılmasını sağlar — metin üzerinde ilerleyen bir parıltı ya da yukarıdan aşağı açılan bir görsel bu şekilde yapılır. mask-size de animasyonlanabilir ve merkezden büyüyen bir açılış verir.

Maske görüntüsünün kendisi (mask-image değeri) ise animasyonlanamaz; iki farklı gradyan arasında geçiş sıçrar. Değişen bir maske gerekiyorsa gradyanın duraklarını CSS değişkeniyle sürüp değişkeni @property ile tiplendirmek gerekir.

cssBilet kenarı — döşenmiş radyal gradyan maskesi

.bilet {
  --oyuk: 12px;
  padding: 1.5rem;
  background: #121722;
  /* Yatayda 28px'de bir yarım daire oyulur */
  mask-image: radial-gradient(
    circle var(--oyuk) at 0 50%,
    transparent 98%,
    #000 100%
  );
  mask-size: 28px 100%;
  mask-repeat: repeat-x;
  -webkit-mask-image: radial-gradient(
    circle var(--oyuk) at 0 50%,
    transparent 98%,
    #000 100%
  );
  -webkit-mask-size: 28px 100%;
  -webkit-mask-repeat: repeat-x;
}

cssKayan parıltı — mask-position animasyonu

.parlayan-yazi {
  background: linear-gradient(90deg, #1e293b, #93c5fd 50%, #1e293b);
  background-clip: text;
  color: transparent;
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mask-size: 200% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  -webkit-mask-size: 200% 100%;
  animation: kay 2.4s linear infinite;
}

@keyframes kay {
  from { mask-position: 200% 0; -webkit-mask-position: 200% 0; }
  to   { mask-position: -100% 0; -webkit-mask-position: -100% 0; }
}

mask mı clip-path mı

Karar basit bir soruya iner: kenar keskin mi olacak, yoksa dereceli mi? Keskin geometrik bir kesim istiyorsan clip-path daha az kod, daha geniş destek ve daha ucuz işlem demektir. Yumuşak geçiş, kısmi saydamlık ya da doku maskesi istiyorsan mask tek seçenektir.

İkinci fark etkileşimde: clip-path kesilen bölgeyi tıklanamaz yapar, mask yapmaz. Maskeyle görünmez hâle gelen bir bölge hâlâ fare olaylarını yakalar. Bu, solan kenarların altındaki bağlantıların tıklanabilir kalmasını sağlar — genelde istenen davranıştır ama bazen sürpriz yapar.

Performans tarafında mask boyama aşamasında ekstra bir birleştirme adımı ekler. Statik kullanımda ihmal edilebilir; ama maskelenmiş elemanları animasyonlamak, özellikle büyük yüzeylerde, transform animasyonundan belirgin biçimde pahalıdır. will-change: mask-position bazı durumlarda yardımcı olur ama her elemanda kullanmak bellek maliyetini artırır.

Katalogdan canlı örnekler

Aşağıdakiler mask 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.

Black Hole

Deco Stamp Edge Badge

mask kullanan 54 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.

Özellik	Tarayıcılar	Not
mask-image (öneksiz)	Chrome 120+, Firefox 53+, Safari 15.4+	Chrome uzun süre yalnızca -webkit- öneki ile destekledi; ikisini birlikte yazmak hâlâ gerekli.
-webkit-mask-image	Chrome 4+, Safari 4+, Edge 79+	Geniş destekli eski yazım. Öneksiz sürümün yanına yazıldığında hiçbir tarayıcıda efekt kaybolmaz.
mask-composite	Chrome 120+, Firefox 53+, Safari 15.4+	WebKit'in -webkit-mask-composite değerleri farklıdır: exclude yerine xor yazılır.
mask-mode: luminance	Firefox 53+, Safari 15.4+, Chrome 120+	Alfa yerine parlaklık kullanır. Öneksiz olmayan WebKit sürümlerinde davranış farklı olabilir.

Yaygın hatalar

black'ten white'a gradyan yazmak
Varsayılan alfa modunda ikisi de tam opaktır ve maske hiçbir şey yapmaz. Soldurma için #000'dan transparent'a git.
-webkit- önekini atlamak
Öneksiz mask desteği Chrome'a ancak 120 sürümünde geldi. Her mask bildirimini -webkit- eşleniğiyle birlikte yazmak hâlâ pratik gereklilik.
mask-composite anahtar sözcüklerini karıştırmak
Öneksiz sürümde exclude, WebKit'te xor yazılır. İkisini de yazmayan kod bir motorda delik açar, diğerinde açmaz.
Maskelenen bölgenin hâlâ tıklanabilir olması
mask yalnızca boyamayı etkiler, işaretleme olaylarını değil. Görünmez ama tıklanabilir alan istemiyorsan pointer-events: none ekle ya da clip-path kullan.
mask-image değerini animasyonlamaya çalışmak
İki farklı gradyan arasında ara değer üretilmez, geçiş sıçrar. mask-position ve mask-size animasyonlanabilir; değişen bir maske için bunları kullan.

Sıkça sorulan sorular

mask ile clip-path arasında hangisini seçmeliyim?: Kenar keskin ve geometrikse clip-path: daha az kod, daha geniş destek, daha ucuz işlem. Kenarın yumuşak solması, kısmi saydamlık ya da doku maskesi gerekiyorsa mask. Ayrıca clip-path kesilen alanı tıklanamaz yapar, mask yapmaz.
SVG ikonu neden CSS ile renklendiremiyorum?: img etiketiyle yüklenen SVG'nin içine CSS ulaşamaz. Çözüm SVG'yi maske olarak kullanmaktır: elemana `background: currentColor` verip `mask: url(ikon.svg) center / contain no-repeat` yazarsan renk artık CSS'ten gelir ve currentColor sayesinde metin rengini izler.
Maskeyle gerçekten delik açabilir miyim?: Evet. İki maske katmanını mask-composite: exclude ile birleştirmek, birinden diğerini çıkararak fiziksel bir delik bırakır ve arkadaki içerik delikten görünür. WebKit için aynı satırı -webkit-mask-composite: xor ile tekrarlamak gerekir.
Maske performansı düşürür mü?: Statik kullanımda maliyeti düşüktür. Animasyonlu kullanımda her karede maske birleştirme adımı tekrarlanır ve büyük yüzeylerde transform animasyonundan belirgin biçimde pahalıdır. Uzun listelerde her öğeye animasyonlu maske vermekten kaçın.
Maskelenmiş elemanın altındaki bağlantılar tıklanabilir mi?: Evet, kalır. mask yalnızca boyamayı etkiler; görünmez hâle gelen bölge fare ve dokunma olaylarını almaya devam eder. Bu genelde solan kenarlarda istenen davranıştır ama gerçekten kapatmak istiyorsan pointer-events veya clip-path gerekir.

İlgili rehberler

Son güncelleme: 20 Temmuz 2026

Tüm rehberler