CSS Mesh Gradient Benzeri Efektler

Mesh gradient, birden fazla rengin farklı noktalardan yayılarak yumuşak bir şekilde karıştığı, genellikle tasarım araçlarında (Figma, Sketch) bulunan bir efekt türüdür. CSS spesifikasyonunda doğrudan "mesh gradient" yoktur; ancak çoklu radial-gradient, çok pozisyonlu linear-gradient ve filter: blur kombinasyonları ile benzer görsel sonuçlar elde edilebilir. Bu rehberde bu teknikleri detaylı olarak ele alıyoruz.

Mesh Gradient Nedir?

Mesh gradient, geleneksel linear veya radial gradient'lerden farklı olarak, renklerin belirli kontrol noktalarından (mesh noktaları) yayıldığı ve birbirleriyle organik şekilde karıştığı bir yapıdır. Figma'daki "mesh gradient" veya CSS Houdini ile gelecekte mümkün olabilecek özellikler bu türdendir. Şu an için saf CSS ile tam mesh gradient üretemeyiz; ancak yaklaşık benzer efektler oluşturabiliriz.

Çok Pozisyonlu Linear Gradient

Bir linear-gradient içinde dört veya daha fazla renk durağı kullanarak köşelerden veya belirli noktalardan gelen renk geçişleri simüle edebilirsiniz. Yüzde değerleri ile her rengin konumunu hassas şekilde ayarlayabilirsiniz.

.multi-color-gradient {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #f5576c 75%,
    #4facfe 100%
  );
}

Bu tür gradient'ler mesh hissi vermez ama zengin renk geçişleri sağlar. Daha organik bir görünüm için birden fazla gradient katmanı üst üste eklenebilir.

Üst Üste Radial Gradient Katmanları

Birkaç radial-gradient katmanını üst üste bindirerek, farklı noktalardan yayılan renk lekeleri elde edebilirsiniz. Her katmanda circle at X Y ile merkez konumu belirlenir. Yarı saydam renkler kullanıldığında katmanlar birbirleriyle karışır.

.mesh-like {
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(102, 126, 234, 0.6) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(240, 147, 251, 0.6) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(79, 172, 254, 0.4) 0%,
      transparent 60%
    ),
    #1a1a2e;
}

Arka plandaki düz renk (#1a1a2e) üzerinde radial katmanlar birleşerek mesh benzeri bir görünüm oluşturur. Merkez konumlarını ve opaklıkları değiştirerek farklı kompozisyonlar elde edebilirsiniz.

Blur ile Yumuşatma

filter: blur() kullanarak keskin gradient kenarlarını yumuşatabilirsiniz. Bu teknik daha çok pseudo-element veya ayrı bir katman üzerinde uygulanır; ana öğenin tamamına blur uygulanırsa metin ve içerik de bulanıklaşır.

.blur-mesh {
  position: relative;
  overflow: hidden;
  background: #1a1a2e;
}
.blur-mesh::before,
.blur-mesh::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.blur-mesh::before {
  background: #667eea;
  top: -50%;
  left: -50%;
}
.blur-mesh::after {
  background: #f093fb;
  bottom: -50%;
  right: -50%;
}

Pseudo-element'ler büyük ve bulanık daireler olarak konumlandırılır; üst üste binen bölgelerde renkler yumuşak şekilde karışır. opacity ile yoğunluk ayarlanabilir.

Performans Notu

filter: blur GPU kullanır ve büyük alanlarda performans etkisi yapabilir. Mobil cihazlarda dikkatli kullanın. CSS Gradient Performans rehberimizde optimizasyon ipuçlarını bulabilirsiniz.

Conic Gradient ile Mesh Alternatifi

conic-gradient merkezden açısal olarak renk dağıtır. Birden fazla conic gradient katmanı veya conic + radial kombinasyonu mesh benzeri desenler üretebilir.

.conic-mesh {
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      #667eea,
      #764ba2,
      #f093fb,
      #667eea
    );
  opacity: 0.8;
}

Glassmorphism ve Neomorphism ile İlişki

Mesh gradient benzeri arka planlar, glassmorphism (cam efektli) veya neomorphism (yumuşak gölgeli) kartların üzerinde sıklıkla kullanılır. Bulanık cam efektinin altında renkli gradient katmanları yer alır. Glassmorphism ve Neomorphism rehberimizde bu stillerin detaylarını inceleyebilirsiniz.

CSS Houdini ve Gelecek

CSS Houdini API'leri (Paint Worklet) ile özel gradient türleri tanımlanabilir. Bu özellik henüz tüm tarayıcılarda yaygın değildir; mesh gradient benzeri özel efektler için ileride Houdini tabanlı çözümler yaygınlaşabilir.

Özet

CSS'de doğrudan mesh gradient yoktur; ancak çoklu radial gradient katmanları, çok pozisyonlu linear gradient ve blur kombinasyonları ile benzer efektler elde edilebilir. Performans için katman sayısını ve blur miktarını makul tutun. Gradient Oluşturucu ile renklerinizi seçip bu tekniklerde deneyebilirsiniz. İlgili rehberler: CSS Gradient Nedir?, Linear, Radial, Conic Farkı, Gradient Performans ve Glassmorphism.