DESIGN

Glassmorphism CSS Oluşturucu

16 Aralık 2025

Glassmorphism, web'de buzlu cam efektini simüle eden tasarım trendidir. macOS Big Sur ve iOS'tan sonra büyük popülerlik kazandı.

Glassmorphism'in Temel Unsurları

Yarı şeffaf arka plan: rgba(255, 255, 255, 0.1-0.3)
backdrop-filter: blur(): Arka planı bulanıklaştırma
Kenarlık: Beyaz yarı şeffaf kenarlık
Gölge: Hafif gölge

Temel CSS Kodu

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

Glassmorphism Kullanım İpuçları

Degrade arka planlar üzerinde en etkili
Aşırı kullanım tasarımı ağır gösterir
Karanlık modda koyu yarı şeffaf kullanın
Mobil cihazlarda backdrop-filter performansına dikkat

Bu aracı dene Glassmorphism CSS Oluşturucu →