CSS Gradient Overlay Teknikleri

Gradient overlay (gradient katmanı), görseller veya videoların üzerine yarı saydam veya opak bir gradient yerleştirerek görsel etkiyi ve metin okunabilirliğini artırmak için kullanılır. Hero bölümleri, kartlar ve galeri öğelerinde sıkça görülür. Bu rehberde CSS ile gradient overlay oluşturma tekniklerini, pseudo-element kullanımını, mix-blend-mode ve okunabilirlik stratejilerini ele alıyoruz.

Görsel Üzerinde Temel Gradient Overlay

En basit yöntem, görseli ve gradient'i aynı öğede arka plan olarak birleştirmektir. Görsel background-image ile, gradient üstte ikinci bir katman olarak eklenir. İki background-image virgülle ayrılarak üst üste bindirilir; ilk yazılan en üstte görünür.

.hero-with-overlay {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0.8) 100%
    ),
    url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

Burada gradient üstte, görsel alttadır. rgba ile yarı saydam siyah kullanılarak görsel karartılır ve alt kısımda metin okunabilirliği artırılır.

Pseudo-element ile Overlay

Daha fazla kontrol için ::before veya ::after pseudo-element kullanılır. Görsel bir img ile veya arka planla konulur, overlay pseudo-element ile üzerine eklenir. Bu yöntem, overlay'e ayrı animasyon veya etkileşim vermek istediğinizde esneklik sağlar.

.card-with-overlay {
  position: relative;
  overflow: hidden;
}
.card-with-overlay img {
  display: block;
  width: 100%;
  height: auto;
}
.card-with-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,
    transparent 50%
  );
  pointer-events: none;
}
.card-with-overlay .content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  color: white;
  padding: 1rem;
}

inset: 0 ile pseudo-element tüm kartı kaplar. pointer-events: none tıklamaların alttaki içeriğe geçmesini sağlar.

Çok Renkli Overlay

Tek renkten çok renkli gradient'lere geçerek marka renkleri veya duygusal ton oluşturabilirsiniz.

.colorful-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.7) 0%,
    rgba(118, 75, 162, 0.7) 100%
  );
}

mix-blend-mode ile Efektler

mix-blend-mode overlay'in altındaki görsel ile nasıl karışacağını belirler. multiply, overlay, soft-light gibi değerler farklı görsel sonuçlar üretir. Dikkat: metin veya diğer içerik de blend modundan etkilenebilir; içeriği ayrı bir katmanda tutup isolation: isolate kullanabilirsiniz.

.blend-overlay {
  position: relative;
  isolation: isolate;
}
.blend-overlay img {
  display: block;
  width: 100%;
}
.blend-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

Okunabilirlik ve Kontrast

Overlay'in temel işlevlerinden biri üzerindeki metnin okunabilirliğini artırmaktır. Açık renkli metin için altındaki gradient koyu olmalı (örn. siyah veya koyu mavi); koyu metin için açık overlay kullanın. Gradyan yönü önemlidir: metin alttaysa alt kısımda koyu, üstteyse üst kısımda koyu bölge olmalıdır.

.readable-overlay {
  background-image:
    linear-gradient(
      to top,
      rgba(0,0,0,0.9) 0%,
      rgba(0,0,0,0.3) 40%,
      transparent 100%
    ),
    url('/hero.jpg');
}

WCAG kontrast gereksinimlerini karşılamak için overlay yoğunluğunu test edin. Kontrast ve WCAG rehberimizde detaylı bilgi bulabilirsiniz.

Responsive Overlay

Farklı ekran boyutlarında overlay oranını veya renklerini medya sorguları ile ayarlayabilirsiniz. Mobilde metin daha küçük olduğundan overlay daha koyu olabilir.

@media (max-width: 768px) {
  .hero-with-overlay {
    background-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.9) 100%
      ),
      url('/images/hero-mobile.jpg');
  }
}

Performans

Pure CSS overlay ekstra HTTP isteği gerektirmez; gradient ve görsel tek öğede birleştirilebilir. Büyük görsellerde background-size: cover ve uygun background-position ile render maliyeti makul tutulabilir. CSS Gradient Performans rehberimizde optimizasyon ipuçlarını inceleyebilirsiniz.

Özet

CSS gradient overlay, görseller üzerinde okunabilirlik ve görsel etki sağlamak için güçlü bir araçtır. Arka plan katmanları veya pseudo-element ile uygulanabilir; mix-blend-mode farklı efektler sunar. Kontrast ve erişilebilirlik her zaman göz önünde bulundurulmalıdır. Gradient Oluşturucu ile renklerinizi deneyebilir, Gradient Hero Section rehberimizle hero tasarımlarını geliştirebilirsiniz.