Glassmorphism Oluşturucu
Glassmorphism Generator, CSS backdrop-filter ile buzlu cam efekti oluşturur; bulanıklığı, arka plan opaklığını, doygunluğu, kenarlık opaklığını, köşe yarıçapını ve renk tonunu canlı önizlemeyle ayarlamanızı sağlar.
Bu araç hakkında
Glassmorphism Generator, CSS backdrop-filter ile buzlu cam efekti oluşturur; bulanıklığı, arka plan opaklığını, doygunluğu, kenarlık opaklığını, köşe yarıçapını ve renk tonunu canlı önizlemeyle ayarlamanızı sağlar.
Nasıl kullanılır
- Cam renk tonunu seçin.
- Bulanıklığı, opaklığı ve doygunluğu ayarlayın.
- Kenarlık opaklığını ve köşe yarıçapını belirleyin.
- Copy CSS'e tıklayın.
Bilmekte fayda var
- Efekt, öğenin arkasında kalan her şeyi bulanıklaştıran backdrop-filter: blur() saturate() kullanır.
- Yarı saydam bir arka plan (rgba) gerekir; aksi halde bulanıklık görünmez.
- Oluşturulan CSS, Safari için -webkit-backdrop-filter önekini içerir.
- Cam efekti renkli veya görselli arka planlarda en iyi sonucu verir; düz renklerde bulanıklık görünmez.
- Metin kontrastını gözden kaçırmayın — yarı saydam paneller hareketli arka planlarda WCAG kontrastının altına düşebilir.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
CSS'te cam efekti nasıl yapılır?
Öğeye rgba(255,255,255,0.15) gibi yarı saydam bir arka plan ve backdrop-filter: blur(12px); verin; bu araç kuralın tamamını yazar.
backdrop-filter neden çalışmıyor?
Öğenin şeffaf veya yarı saydam bir arka planı olmalı ve arkasında bulanıklaştırılacak bir şey bulunmalıdır. Safari ayrıca -webkit- önekine ihtiyaç duyar.
Glassmorphism erişilebilir mi?
Metin yeterli kontrastı koruyorsa olabilir. Metin renklerini arka planın en yoğun bölümü üzerinde test edin.
backdrop-filter performansı düşürür mü?
Bulanıklaştırma GPU'yu yoğun kullanır; bu yüzden özellikle düşük donanımlı telefonlarda çok geniş alanlara veya aynı anda çok sayıda öğeye uygulamaktan kaçının.