Glassmorphism ve Neomorphism CSS Rehberi

Glassmorphism ve neomorphism, modern web arayüzlerinde sıkça kullanılan iki popüler UI trendidir. Her ikisi de gradient, gölge ve yarı saydamlık ile derinlik ve dokunsal his yaratır. Bu rehberde her iki stili CSS ile nasıl uygulayacağınızı, backdrop-filter ve box-shadow tekniklerini detaylıca ele alıyoruz.

Glassmorphism Nedir?

Glassmorphism (cam efektı), buzlu cam görünümü veren yarı saydam arka planlar ve backdrop-filter: blur() ile arka planın bulanıklaştırılması üzerine kuruludur. Genellikle hafif gradient veya tek renk + yüksek opacity kullanılır. Kartlar, modaller ve sidebar'larda sıkça tercih edilir.

.glass-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Arka planda gradient veya renkli bir arka plan olmalı ki blur efekti görünsün. Aksi takdirde cam hissi zayıf kalır.

Glassmorphism ile Gradient Kombinasyonu

Glass kartları gradient arka plan üzerine yerleştirdiğinizde çok etkili sonuçlar elde edersiniz. Kartın kendisi yarı saydam olduğundan arkadaki gradient hafifçe görünür ve blur ile yumuşar.

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}

Neomorphism Nedir?

Neomorphism (soft UI), elemanların arka plandan yumuşak bir şekilde "çıkıntı" veya "gömülü" gibi göründüğü bir stilidir. Aynı tondaki highlight ve shadow ile sahte 3D efekt oluşturulur. Gradient burada genellikle hafif ton geçişleri veya düz renklerle kullanılır.

.neo-btn {
  background: #e0e5ec;
  box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
}

Gömülü (pressed) efekt için gölge yönleri ters çevrilir:

.neo-btn:active {
  box-shadow: inset 4px 4px 8px #c8ccd1, inset -4px -4px 8px #ffffff;
}

Neomorphism ve Gradient

Neomorphism çoğunlukla düz renklerle kullanılır; ancak arka plana hafif gradient ekleyerek tasarıma derinlik katabilirsiniz. Dikkat: Neomorphism kontrast açısından zayıf kalabilir; erişilebilirlik açısından sınırlı kullanım önerilir.

Backdrop-Filter Tarayıcı Desteği

backdrop-filter Safari'de uzun süredir desteklenirken, Chrome ve Firefox'ta daha geç eklendi. -webkit-backdrop-filter öneki ile Safari uyumluluğu sağlanır. Desteklemeyen tarayıcılar için fallback olarak opak veya daha koyu bir arka plan kullanın.

.glass-card {
  background: rgba(255, 255, 255, 0.9); /* fallback */
}

@supports (backdrop-filter: blur(12px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
  }
}

Performans Notları

backdrop-filter GPU yoğun bir işlemdir. Çok sayıda glass öğe veya büyük blur değerleri performansı düşürebilir. Mobilde blur değerini düşürün veya @media (prefers-reduced-motion) ile devre dışı bırakın.

Sonuç

Glassmorphism ve neomorphism, gradient ve gölge kombinasyonu ile modern arayüzler oluşturmanın etkili yollarıdır. Gradient Oluşturucu ile arka plan paletinizi hazırlayıp glass kartlarınız üzerinde test edebilirsiniz.

İlgili rehberler: CSS Gradient Nedir? · Gradient Animation · Renk Uyumu · Gradient Oluşturucu · Marka Renkleri