CSS Glassmorphism Üretici — Buzlu Cam Efekti

Nasıl çalışır?

Sol panele kartın içinde görünecek yazıyı girin; önizleme bu yazıyla renkli bir zeminin üzerine buzlu cam kart çizer. Bulanıklık kaydırıcısı kartın arkasında kalan her şeyin ne kadar dağılacağını belirler: 10 piksel çoğu tasarım için yeterli, 20 pikselin üstünde arka plan tanınmaz olur. Dolgu opaklığı camın kendi rengini ayarlar: yüzde 25 kodda rgba(255, 255, 255, 0.25) olarak yazılır. Değer düştükçe cam saydamlaşır ama üzerindeki yazının okunması zorlaşır. Kenarlık görünürlüğü camın ince parlak kenarını belirler. Cam rengine koyu bir renk yazarsanız (#0f172a gibi) karanlık tema için füme cam elde edersiniz. Kod iki satırlık bulanıklık taşır: -webkit-backdrop-filter eski Safari ve iPhone'lar için, backdrop-filter diğer tarayıcılar için. En altta, efekti hiç tanımayan tarayıcıda opaklığı yüzde 85'e çıkaran bir @supports yedeği vardır. Unutmayın: cam etkisi yalnızca arkasında renkli bir görsel ya da desen varsa görünür.

Bu araç glassmorphism css, buzlu cam efekti css, backdrop filter blur, cam efekti css, css glassmorphism generator, frosted glass css aramalarıyla da biliniyor.

Glassmorphism nedir?

Glassmorphism, arayüz öğelerini arkasındakini bulanık gösteren yarı saydam buzlu cam paneller gibi çizen tasarım akımıdır. 2020 civarında Apple'ın macOS Big Sur ve Microsoft'un Fluent arayüzleriyle yaygınlaştı. Katmanlar arasında derinlik duygusu verir; ama dekoratif bir arka plan ister ve metin kontrastını dikkatle ayarlamayı gerektirir.

backdrop-filter nedir?

backdrop-filter, bir öğenin kendisine değil ARKASINDA kalan alana blur(), brightness(), saturate() gibi filtreler uygulayan CSS özelliğidir. Etkinin görünmesi için öğenin arka planı en azından kısmen saydam olmalıdır; tam opak bir kutunun arkası zaten görünmez. Her karede yeniden hesaplandığı için büyük alanlarda ve zayıf cihazlarda performansı etkileyebilir.

backdrop-filter ile filter arasındaki fark nedir?

filter öğenin KENDİSİNİ işler: filter: blur(10px) verilen bir kartta kartın yazısı da, kenarlığı da bulanıklaşır. backdrop-filter ise öğenin ARKASINDA kalan içeriği işler; kartın kendi yazısı keskin kalır, yalnız arkasından görünen fotoğraf dağılır. Buzlu cam efekti için doğru özellik backdrop-filter'dır; filter bir görseli ya da bütün bir bölümü bulanıklaştırmak için kullanılır.

Tuzak: düz zeminde cam görünmez, yazı okunmaz olabilir

backdrop-filter kartın ARKASINDAKİ pikselleri bulanıklaştırır. Kartın arkasında tek renk bir zemin varsa bulanıklaştırılacak bir şey yoktur ve kart sıradan yarı saydam bir kutu gibi görünür. Glassmorphism'in çalışması için arkada fotoğraf, renk geçişi ya da şekiller olmalıdır.

İkinci tuzak okunabilirliktir. Dolgu opaklığı yüzde 10'a indiğinde kartın içindeki yazının kontrastı arkadaki görsele bağlı kalır; görselin açık bir yeri beyaz yazıyı yutar. Metin taşıyan kartlarda opaklığı yüzde 20–40 arasında tutun ve yazıyı gerçek içerikle, en kötü arka plan noktasında deneyin.

Tarayıcı desteği ve ne zaman kullanılmalı?

backdrop-filter bugün yaygın tarayıcıların hepsinde çalışır; ayrıntılar karar verirken önemlidir:

• Safari ve iPhone'larda 18. sürüme kadar yalnız -webkit- önekli yazım çalışır → kodda iki satır da var
• Firefox 103'ten (2022) önce desteklemiyordu → @supports yedeği yazıyı okunur tutar
• Büyük bulanıklık zayıf telefonlarda kaydırmayı yavaşlatabilir → tam ekran katmanlarda 20 pikselin altında kalın
• Uygun yerler: gezinme çubuğu, açılır pencere, resim üstü kart
• Uygun olmayan yerler: uzun metin bölümleri, tablolar, formlar

Sık sorulanlar

Glassmorphism için hangi CSS özellikleri gerekiyor?

Dört parça yeterli: yarı saydam arka plan (rgba), arkayı bulanıklaştıran backdrop-filter: blur(), ince yarı saydam kenarlık ve yumuşak bir gölge. Köşe yuvarlatma (border-radius) görünümü tamamlar. Bu araç beşini de tek kuralda üretir.

Neden aynı satır -webkit- önekiyle iki kez yazılıyor?

Safari, backdrop-filter'ı yıllarca yalnızca -webkit-backdrop-filter adıyla tanıdı; öneksiz ad Safari 18'de (2024) geldi. Eski iPhone ve Mac kullanıcılarında efektin çalışması için iki satır da gerekir. Tarayıcı tanımadığı satırı yok sayar, çift yazım zarar vermez.

Koyu (füme) cam nasıl yapılır?

Cam rengine koyu bir renk yazın, örneğin #0f172a, dolgu opaklığını yüzde 30–50 arasına çekin ve kenarlık görünürlüğünü yüzde 10 civarında bırakın. Kartın içindeki yazıyı beyaz yapmayı unutmayın.

İndir düğmesi ne kaydediyor?

Önizlemenin 1200×800 piksellik PNG halini. Kodun kendisini Çıktıyı kopyala düğmesiyle alın. Önizlemedeki bulanıklık tarayıcının tuval filtresiyle çizilir; bu filtreyi desteklemeyen eski tarayıcılarda önizleme bulanıksız görünebilir, üretilen CSS bundan etkilenmez.