Tasarım Aracı
Glassmorphism CSS Üretici
Trendy cam efekti (frosted glass) stilleri için backdrop-filter CSS kodunu görsel olarak oluşturun.
Glassmorphism Nedir?
Glassmorphism, 2020-2021 yıllarında iOS 15 ve macOS Big Sur ile ana akıma giren bir UI tasarım trendidir. Temel fikir: yarı saydam, bulanık cam görünümü yaratmak. CSS'de bu backdrop-filter: blur() özelliği ile elde edilir; bu özellik elemanın arka planındaki pikselleri bulanıklaştırır ve buzlu cam etkisi yaratır. Windows 11'in Acrylic Material ve Apple'ın Liquid Glass tasarım dilini de bu aileden sayabiliriz.
Glassmorphism'i Oluşturan Dört Unsur
- backdrop-filter: blur(): Arka planı bulanıklaştırır. 8-16px aralığı çoğu kullanım için dengeli görünür.
- Yarı saydam arka plan: rgba(255, 255, 255, 0.15-0.25) aralığı klasik glassmorphism'i verir.
- Hafif kenarlık: rgba(255, 255, 255, 0.3) ile ince parlama etkisi eklenir.
- Box shadow: Derinlik hissi için yumuşak gölge. Koyu renk önerilir, parlak değil.
Ne Zaman Kullanılır, Ne Zaman Kaçınılır?
Glassmorphism, renkli veya görselli bir arka planın üzerinde duran kartlar, modal pencereler, navigasyon barları ve hero bölümleri için güçlü bir estetik sunar. Ancak metin ağırlıklı, düz beyaz arka planlı sayfalarda anlamsız kalır — efektin görünmesi için arka planda renkli bir içerik katmanı şarttır. Saf metin sayfalarında veya erişilebilirlik öncelikli projelerde alternatif bir tasarım yaklaşımı daha uygun olabilir.
Sık Sorulan Sorular
Internet Explorer veya eski Edge'de çalışır mı?
Hayır. backdrop-filter Chromium tabanlı Edge (79+) öncesinde ve IE'de hiç desteklenmez. Eski tarayıcılar icin @supports kuralıyla fallback tanımlayabilirsiniz: @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.7); } } Bu sayede desteklemeyen tarayıcılarda daha opak bir arka plan gösterilir.
İlgili araçlar: Neumorphism CSS Üretici · Box Shadow Generator · Border Radius Generator