Pratiksel
Ücretsiz Hesaplama
Tasarım ve Renk

CSS Glassmorphism (Buzlu Cam) Oluşturucu

Bulanıklık, opaklık ve kenarlık ayarlarını canlı önizleyerek modern buzlu cam efekti CSS kodlarını üretin.

Buzlu Cam Kartı

Glassmorphism UI Önizleme

CSS Kodu:
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

CSS Glassmorphism (Buzlu Cam) Oluşturucu

Modern UI tasarımlarında popüler olan yarı şeffaf buzlu cam efekti için CSS backdrop-filter, rgba arka plan ve kenarlık kodu üretici.

1Nasıl Kullanılır?

  1. 1.Bulanıklık (Blur) miktarını ve arka plan opaklık yüzdesini ayarlayın.
  2. 2.Cam kenarlık (border) kalınlığı ve gölge detaylarını canlı önizlemede test edin.
  3. 3.Cross-browser uyumlu hazır CSS kodunu projenize kopyalayın.

2Buzlu Cam Efektinin Temel CSS Bileşenleri

Glassmorphism estetiği arka planı bulanıklaştıran backdrop-filter, yarı şeffaf beyaz dolgu ve ince ışık yansıması kenarlığı kombinasyonudur.

background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3);

Webkit Ön Eki Gereksinimi

Safari tarayıcılarda buzlu cam efektinin düzgün render edilmesi için -webkit-backdrop-filter satırı mutlaka eklenmelidir.

3Örnek Glassmorphism Kart Kodu

Renkli arka plan üzerinde yüzen modern şeffaf kart:

Bulanıklık (Blur)12px
Opaklıkrgba(255, 255, 255, 0.15)
Kenarlık1px solid rgba(255, 255, 255, 0.2)
Kutu Gölgesi0 8px 32px 0 rgba(0, 0, 0, 0.15)

💡 Sonuç Değerlendirmesi: Arka plandaki renk geçişleri camın arkasından estetik biçimde flu görünür.

⚠️Dikkat Edilmesi Gereken Önemli Hususlar

  • •Glassmorphism arkasında zengin bir görsel veya renkli gradyan olmadığında (örneğin düz beyaz arka planda) cam efekti kendini gösteremez.

Sıkça Sorulan Sorular (SSS)

Backdrop-filter ile filter: blur arasındaki fark nedir?

filter: blur elemanın kendi içeriğini bulanıklaştırır; backdrop-filter: blur ise elemanın arkasında kalan diğer katmanları bulanıklaştırır.

İlgili Araçlar

Tasarım ve RenkQR Kod OluşturucuTasarım ve RenkRenk Kodu DönüştürücüTasarım ve RenkEn-Boy Oranı (Aspect Ratio) HesaplayıcıTasarım ve RenkDPI / PPI Baskı Ölçüsü Dönüştürücü