Yarı saydam bir panelin, buzlu cam gibi arkasındaki her şeyi bulanıklaştırdığı görsel bir stildir; genellikle ince, açık renkli bir kenarlık ve yumuşak bir gölgeyle birlikte kullanılır. CSS'te yarı saydam bir arka planı backdrop-filter: blur() ile birleştirir.

Cam panelim neden bulanık görünmüyor?

backdrop-filter yalnızca öğenin arkasındaki içeriği etkiler; bu yüzden öğenin saydam veya yarı saydam bir arka planı ve arkasında görünür bir şey olması gerekir. Tamamen opak bir arka plan efekti gizler.

Hangi tarayıcılar backdrop-filter'ı destekler?

Chrome, Edge, Firefox ve Safari'nin güncel sürümleri destekler. Safari 18'den önceki sürümler -webkit- önekine ihtiyaç duyar; dışa aktarılan CSS bu öneki içerir.

Glassmorphism Oluşturucu

backdrop-filter ile buzlu cam paneller oluşturun. Bulanıklık, saydamlık, doygunluk ve kenarlığı canlı bir arka plan üzerinde ayarlayın, ardından CSS'i kopyalayın.

Canlı önizleme

Buzlu cam

Cam üzerindeki metin, arka planın her bölümüne karşı yeterli kontrasta sahip olmalıdır.

Arka plan yalnızca önizleme içindir ve dışa aktarılmaz.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Her şey tarayıcınızda kalır.

Biçim kaynakları

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Araç sayfasının güncellenme tarihi: 2026-10-25

Canlı önizleme

Kılavuz ve örnek

İlgili araçlar

Biçim kaynakları