M
Cam Efekti glassmorphismendüstri trendi
bilinen diğer adları frosted glass UI · acrylic (Microsoft'un adı) · vibrancy (Apple'ın adı) · buzlu cam
"buzlu cam gibi, arkası hafif görünen paneller" diyorsan → bunun adı glassmorphism.
Glassmorphism, panelleri arkasındaki manzarayı bulanıklaştıran yarı saydam cam levhalar gibi çizer. Panelin kendi rengi yoktur; taşıdığı renk arkasındaki zeminin bulanıklaşmış hâlidir — bu yüzden zemin ne kadar canlıysa cam o kadar okunur, düz tek renk zeminde ise görünmez olur. Kenarlarda ince bir beyaz ışık çizgisi camın nerede bittiğini söyler, geniş yumuşak gölgeler ise panelleri hem zeminin hem birbirinin üstünde yüzdürür. Güzel görünür ama pahalıdır: hem kontrastı öngörülemez kılar hem işlemciyi yorar.
Kapsam: Bu madde camın HERHANGİ bir yüzeye giydirilebildiği dekoratif kullanımı kapsar. Apple'ın camı yalnızca kontrol katmanına ayırdığı sistem dili ayrı bir maddedir (Sıvı Cam). Parlaklığın saydamlıktan değil opak yüzeyin kendi cilasından geldiği görünüş ise Frutiger Aero'dur.
- “buzlu cam gibi, arkası hafif görünen paneller”
- “renkli zeminin üstünde donuk cam kartlar”
- “arkası bulanık duran yarı saydam kutular”
- “macOS'taki gibi bulanık pencere panelleri”
- “kripto uygulamalarındaki o camsı kartlar”
…hepsinde kastettiğin şey glassmorphism.
Cam ancak arkasında bakılacak bir şey varsa görünür: buradaki paletin tamamı zeminden geliyor, panelden değil. Küçük panel büyüğün üstünde duruyor — cam üstünde cam, stilin imzası.
belirleyici bu olmadan stil o stil değildirdestekleyici sık görülür, şart değildeğişken serbest, değiştirebilirsinkaçın bu stille anılır ama ona ait değildir
Panel kendi rengini değil arkasındaki manzaranın bulanıklaşmış hâlini taşır. Bulanıklık yoksa elindeki şey sadece yarı saydam bir kutudur; o cam değildir.
Sayfadaki her kartı cam yapmak derinliği yok eder ve metni okunmaz kılar. Cam bir vurgu malzemesidir: 2-3 panel cam, gerisi opak.
Paletin kaynağı panel değil arkasındaki degrade, fotoğraf ya da renkli şekillerdir. Düz tek renk zeminde bulanıklaştıracak bir şey kalmaz ve cam görünmez olur — bu stilin en sık yapılan hatasıdır.
Camın nerede bitip zeminin nerede başladığını bu ince ışık çizgisi söyler. Üst kenarda biraz daha parlak olması ışığın yukarıdan geldiği hissini kurar.
Yumuşak köşeler cam levha hissini güçlendirir ama şart değildir. Keskin köşeli cam da mümkündür, sadece daha sert ve teknik durur.
Paneller hem zeminin hem birbirinin üstünde yüzer; katmanları geniş ve yumuşak gölgeler ayırır. Cam üstünde cam görmek stilin imzasıdır, tek panelde etki yarım kalır.
Hareket genelde arkadaki renklerdedir: degrade yavaşça kayar, paneller sabit kalır. Camın kendisi akmaya başlarsa dil Sıvı Cam'a kayar.
Parlayan kenarlar camla birlikte sık kullanılıyor ama cam ailesine ait değil; o ayrı bir dil. Camın parlaklığı ışık yaymaktan değil arkayı göstermekten gelir.
Sıvı Cam değil. Bu glassmorphism'dir çünkü cam, herhangi bir yüzeye giydirilebilen dekoratif bir deridir: içerik kartı da cam olabilir. Liquid Glass olurdu eğer cam yalnızca içeriğin ÜSTÜNDE yüzen kontrol katmanına ayrılsaydı — Apple'ın dilinde cam, düğmelerin ve çubukların malzemesidir, içeriğin değil; üstelik ışığı sadece bulanıklaştırmaz, kırar ve altındakine göre kendi tonunu değiştirir.
Frutiger Aero değil. Bu glassmorphism'dir çünkü parlaklık ARKAYI GÖRMEKTEN gelir; baktığın şey saydamdır. Frutiger Aero olurdu eğer parlaklık yüzeyin kendi cilasından gelseydi — orada gördüğün opak, sulu, parlak bir jeldir: ona bakarsın, içinden değil.
Tam sayfa örneğini gez →baştan sona landing; şeritten stil atlayabilirsin
⚠ Kontrast düşer — metin arkasına koyu katman ekle; blur mobilde pahalıdır, az panelde kullan.
Yukarıdaki brief çerçeve-bağımsızdır; bunlar stack'in uyuyorsa somut tutamaklar.
- CSS
backdrop-filter: blur(16px); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 20px;Temel cam reçetesi. Arkasında RENKLİ bir şey yoksa bu kod hiçbir şey göstermez.
- CSS
@supports not (backdrop-filter: blur(1px)) { .cam { background: rgba(20,20,30,.9); } }Desteklemeyen tarayıcıda opak yüzeye düş; cam bir süs, okunabilirlik değil.
- CSS
@media (prefers-reduced-transparency: reduce) { .cam { backdrop-filter: none; background: #16182a; } }Kullanıcı saydamlığı azalt dediyse dinle — bu bir zevk tercihi değil erişilebilirlik ayarı.
- Cam üstü metin en riskli yer, çünkü zemin değiştikçe kontrast da değişir. Kontrastı EN KÖTÜ zeminde ölç, en iyisinde değil; gerekiyorsa panelin altına yarı saydam koyu bir katman (scrim) koy ve 4.5:1 eşiğini garanti et.
- Sistem 'saydamlığı azalt' diyorsa dinle. prefers-reduced-transparency açıkken cam yerine opak yüzeye düşmek bir zevk tercihi değil, erişilebilirlik gereğidir.
- backdrop-filter pahalıdır: hareketli içeriğin üstünde ve düşük güçlü cihazlarda kare düşürür. Blur'lu panel sayısını sınırla, blur'suz opak bir fallback hazırla — Microsoft'un akriliği düz renge düşürme davranışı tam olarak bunun içindir.
- Klavye odak halkası camın kendi 1px kenarına karışır. Odağı kenarlıktan açıkça farklı bir renk ve kalınlıkla göster, yoksa klavyeyle gezen kullanıcı nerede olduğunu göremez.
| ✅ Kullan | Modern ürün vitrini, fintech/AI havası, login ekranları, müzik çalarlar. |
| ⛔ Kaçın | Uzun metin okunacak sayfalarda (blog, doküman) — okunabilirlik düşer. |
macOS Big Sur+ panelleri
Windows 11 Acrylic
çoğu kripto/fintech dashboard'u
Sektör terimi. Efekt adından eskidir ve her firma başka ad kullanıyordu (Apple'da vibrancy, Microsoft'ta acrylic). Ortak adı bir platform sahibi değil, bir tasarımcı koydu — bu yüzden marka dili değil sektör terimi sayılır.
Malzeme addan eskidir. Apple iOS 7'de (2013) bulanık saydam katmanları sistem diline soktu; Microsoft 2017'de Fluent Design ile aynı malzemeyi acrylic adıyla belgeledi ve iki karışım türü tanımladı (arka plan akriliği / uygulama içi akrilik). Ortak bir ad yoktu: frosted glass, vibrancy, acrylic hep aynı şeyi anlatıyordu. Kasım 2020'de Michal Malewicz UX Collective'de yayımladığı yazıda glassmorphism adını koydu (glass + skeuomorphism); aynı yıl macOS Big Sur'un cam ağırlıklı arayüzü akımı büyüttü. 2025'te Apple kendi cam dilini Liquid Glass adıyla yeniden tanımlayınca cam ailesi ikiye ayrıldı — dekoratif deri (glassmorphism) ve kontrol katmanı malzemesi (Liquid Glass).
- birincilMichal Malewicz — Glassmorphism in user interfaces (UX Collective, Kas 2020) ↗
Terimi ortaya atan yazının kendisi. Medium giriş duvarı çıkarabilir.
- birincilMicrosoft Learn — Acrylic material (Fluent Design) ↗
Aynı malzemenin platform sahibince belgelenmiş hâli; kullanım sınırları (geçici, ışıkla kapanan yüzeyler) burada yazılı.
- standartMDN — backdrop-filter ↗
Efekti üreten CSS özelliği ve tarayıcı desteği.
- standartMDN — prefers-reduced-transparency ↗
Kullanıcının 'saydamlığı azalt' sistem tercihi; camın opak fallback'i buna bağlanır.
- standartW3C — WCAG 2.2, Contrast (Minimum) ↗
Cam üstündeki metnin geçmesi gereken 4.5:1 eşiği.
Sıvı Cam liquid glassFrutiger Aero frutiger aeroGerçekçi Taklit skeuomorphism