Tasarım / CSS

Glassmorphism CSS Oluşturucu (Buzlu Cam Efekti)

CSS backdrop-filter ile buzlu cam görünümü oluşturun: renkli bir önizleme üzerinde bulanıklığı, renk tonunu, opaklığı, doygunluğu, kenarlığı ve köşe yarıçapını ayarlayın; tüm güncel tarayıcılarda çalışan CSS'i kopyalayın.

Glassmorphism CSS Oluşturucu (Buzlu Cam Efekti): backdrop-filter: blur() öğenin arkasındaki her şeyi bulanıklaştırır, saturate() ise bu renkleri daha canlı hâle getirir. Yarı saydam bir arka plan cama renk verir; hafif ve açık renkli bir kenarlık da gerçek camda olduğu gibi kenarı belirginleştirir. -webkit- ön ekli satır, 18 sürümünden önceki Safari sürümlerini destekler. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori: Geliştirici araçları
Çalıştırma sayısı: Tarayıcınızda
Maliyet: Ücretsiz · kayıt gerekmez
Kullanılabilirlik: Kullanıma hazır

Glassmorphism oluşturucuYerel işleme

Tamamen tarayıcınızda çalışır

Buzlu camBu kartın arkasındaki renkler bulanıklaştırılır.

Ton#ffffffOpaklık25%Bulanıklık12 pxDoygunluk180%Kenarlık opaklığı30%Köşe yarıçapı16 px Gölge

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Bu efekt, öğenin arkasında renkli bir şey olmasını gerektirir: backdrop-filter alttaki her şeyi bulanıklaştırır ve yarı saydam arka plan bunların görünmesini sağlar. -webkit- satırı, 18. sürümden önceki Safari içindir. Cam üzerindeki metnin arka planın her bölümünde yeterli kontrastı koruduğunu kontrol edin.

Erişilebilirlik

Bazı kullanıcılar sistem ayarlarında azaltılmış saydamlığı etkinleştirir. Chromium tabanlı tarayıcılarda desteklenen prefers-reduced-transparency medya sorgusu, bu kullanıcılar için cam görünümünü düz bir arka planla değiştirebilir.

Gölgeyle eşleştirme

Yumuşak ve geniş bir gölge, kartı arka plandan ayırır; gölgeyi box shadow oluşturucuyla ayarlayın ve box-shadow satırını değiştirin.

Nasıl kullanılır?

Bulanıklığı, opaklığı ve doygunluğu ayarlayın.
Renk tonunu, kenarlığı ve köşe yarıçapını seçin.
CSS'i kopyalayın ve öğeyi renkli bir arka planın üzerine yerleştirin.

Gizlilik ve sınırlamalar

Her şey tarayıcınızda çalışır.

İlgili araçlar

Sık sorulan sorular

Cam efektim neden düz görünüyor?

Arkasında renkli veya ayrıntılı bir şey bulunmalıdır; düz bir rengin üzerinde bulanıklaştırılacak hiçbir şey olmaz.

backdrop-filter yavaş mı?

Özellikle büyük alanlar hareketli içeriğin üzerinde kaydırılırken çoğu CSS özelliğinden daha fazla kaynak kullanır; bulanıklaştırılan alanları küçük tutun ve bu alanları üst üste çok fazla kullanmaktan kaçının.

Metin okunabilir mi?

Kontrol edin: arka plana göre kontrast değişir. Daha koyu bir renk tonu, daha fazla opaklık veya metin gölgesi yardımcı olur.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez