AraçKutusu

Glassmorphism Oluşturucu

Modern arayüzlerin buzlu cam (glassmorphism) efektini üretin: arka plan bulanıklığı, saydamlık, renk ve kenarlığı ayarlayın; canlı önizleyip backdrop-filter içeren hazır CSS kodunu kopyalayın.

Glassmorphism
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);

Glassmorphism Oluşturucu nedir, ne işe yarar?

Glassmorphism, arayüz öğelerine buzlu cam görünümü veren modern bir tasarım stilidir. Yarı saydam bir arka plan, arkadaki içeriği bulanıklaştıran backdrop-filter ve ince bir kenarlıkla oluşturulur.

Bu araçta bulanıklık, saydamlık, renk, köşe yuvarlaklığı ve kenarlığı ayarlar; sonucu renkli bir zemin üzerinde canlı önizlersiniz. Üretilen CSS, Safari uyumu için -webkit-backdrop-filter satırını da içerir.

Glassmorphism Oluşturucu nasıl yapılır?

  1. Arka plan bulanıklığını ve saydamlığı ayarlayın.
  2. Cam rengini, kenarlık ve köşe yuvarlaklığını seçin.
  3. Canlı önizlemeyi görün, backdrop-filter içeren CSS kodunu kopyalayın.

Nerelerde kullanılır?

  • Görsel üzerine yerleşen kart ve menüler tasarlamak
  • Giriş/kayıt formlarına şık cam efekti vermek
  • Bildirim ve açılır panelleri modernleştirmek
  • Hero bölümünde öne çıkan cam kutular oluşturmak

İpuçları

  • backdrop-filter'ın çalışması için öğenin arkasında bir görsel/içerik olmalı.
  • Öğenin arka planı yarı saydam olmalı; düz beyaz üzerinde efekt görünmez.
  • Aşırı bulanıklık okunurluğu düşürür; metinlerde dengeyi koruyun.

Cam efekti nasıl oluşur?

Görsel olarak cam hissi üç şeyin bir arada kullanılmasından doğar: arkadaki içeriğin bulanıklaştırılması, yarı saydam bir arka plan rengi ve ince bir açık renk kenarlık. Bulanıklık derinlik yaratır, saydamlık katmanın arkasında bir şey olduğunu hissettirir, kenarlık ise camın kenarındaki ışık kırılmasını taklit eder.

Bu efektin işe yaraması arkada renkli ve hareketli bir zemin bulunmasına bağlıdır. Düz beyaz bir arka plan üzerinde cam efekti uygulandığında hiçbir şey görünmez; bulanıklaştıracak bir şey yoktur.

Okunabilirlik en sık gözden kaçan konu

Cam panelin üzerine yazı koyduğunuzda metin, arkadaki değişken zeminle yarışır. Arka plan açık renkliyse koyu metin okunur, koyu renkliyse okunmaz hâle gelir. Sabit bir renk seçmek her zaman işe yaramaz çünkü arka plan kaydıkça kontrast değişir.

Pratik çözüm, cam katmanın saydamlığını azaltmak ya da metnin arkasına ek bir yarı saydam katman koymaktır. Erişilebilirlik açısından metin ile zemin arasındaki kontrast oranının en az 4,5'e 1 olması beklenir; cam efektinde bunu gözle değil ölçerek doğrulamak gerekir.

Performans maliyeti

Arka plan bulanıklaştırma tarayıcı için ucuz bir işlem değildir; her karede yeniden hesaplanır. Sayfada çok sayıda cam panel varsa, özellikle eski telefonlarda kaydırma takılmaya başlar.

Bu yüzden efekti sınırlı sayıda öğede kullanmak akıllıcadır: bir gezinme çubuğu, bir kart, bir açılır panel. Ürettiğiniz CSS'i doğrudan kopyalayıp projenize yapıştırabilirsiniz; tüm hesaplama tarayıcınızda yapılır.

Sık sorulan sorular

backdrop-filter tüm tarayıcılarda çalışır mı?

Modern tarayıcıların hepsinde çalışır. Bazı Safari sürümleri için çıktıya -webkit-backdrop-filter satırı da eklenir.

Efekt neden arka planı bulanıklaştırmıyor?

backdrop-filter'ın çalışması için öğenin ARKASINDA bir içerik/görsel olmalı ve öğenin arka planı yarı saydam olmalıdır. Düz beyaz üzerinde etki görünmez.

Nerede kullanılır?

Kart, menü, giriş formu ve bildirim panelleri gibi bir görselin üzerinde 'buzlu cam' etkisi isteyen her yerde.

İlgili araçlar