CSS Glassmorphism Oluşturucu

Bu araç, yarı saydam bir arka planı backdrop-filter: blur() ile birleştirerek CSS buzlu cam (glassmorphism) efekti oluşturur — kaydırıcıları renkli önizlemenin üzerinde sürükleyerek cam kartın arkasındaki her şeyi nasıl bulanıklaştırdığını görün, ardından CSS kodunu kopyalayın. Ayrıca Safari'nin hâlâ ihtiyaç duyduğu -webkit-backdrop-filter önekini de oluşturur.

Bu Araç Nedir?

Glassmorphism, bir öğenin buzlu cam gibi görünmesini sağlayan bir arayüz stilidir: yarı saydam bir arka plan, arkasındaki renklerin görünmesine izin verirken, backdrop-filter: blur() bu arka planı bulanıklaştırarak öğenin düz saydam bir panel yerine cam gibi algılanmasını sağlar. İnce, yarı saydam bir kenarlık ve yuvarlatılmış köşeler genellikle bu görünümü tamamlar.

Bu araç, bu efekti görsel olarak oluşturmanızı sağlar. Önizleme, bulanıklığın görünür olması için özellikle hareketli bir gradyan arka planın üzerinde yer alır — glassmorphism yalnızca arkasında renk veya detay bulunan bir yüzeyde doğru görünür, düz beyaz bir sayfada değil. Arka plan renginin opaklığını, bulanıklık gücünü, kenarlık opaklığını ve köşe yarıçapını ayarlayın, ardından oluşturulan CSS kodunu kopyalayın.

Kaynak: Filter Effects Module Level 1, W3C — bu efektin temelini oluşturan backdrop-filter özelliğini tanımlar.

Neden Kullanmalısınız?

Renkli, hareketli bir arka plan üzerinde canlı önizleme, böylece boş bir arka plana karşı bulanıklık değerlerini tahmin etmek yerine buzlu cam efektini gerçekten görebilirsiniz.
Arka plan opaklığı, arka plan bulanıklık gücü, kenarlık opaklığı ve border-radius üzerinde tek bir yerden tam kontrol.
Safari desteğini unutmamanız için hem backdrop-filter hem de -webkit-backdrop-filter önekini otomatik olarak oluşturur.
Tamamen tarayıcınızda çalışır — yaptığınız hiçbir ayar hiçbir yere yüklenmez.
Ücretsiz, kayıt gerektirmez, mobil cihazlarda çalışır.

Nasıl Kullanılır

Bir arka plan rengi seçin ve opaklığını ayarlayın — düşük opaklık (%10–25) cam gibi görünür; yüksek opaklık daha çok katı, renkli bir panele benzer.
Öğenin arkasındaki her şeyi bulanıklaştırmak için bulanıklık gücünü artırın — buzlu cam görünümünü asıl yaratan şey budur, saydamlığın kendisinden farklı olarak.
Cam kartın arka planla birleşmek yerine ayrı bir yüzey gibi görünmesine yardımcı olan hafif ve açık bir kenar eklemek için kenarlık opaklığını ayarlayın.
Yuvarlatılmış köşeler için border-radius değerini ayarlayın — glassmorphism kartları neredeyse her zaman yuvarlatılmıştır, nadiren keskin köşelidir.
Oluşturulan CSS kodunu kopyalayın ve stil sayfanıza yapıştırın. Öğenin arkasında renk veya doku içeren bir şey olması gerektiğini unutmayın — glassmorphism, düz, tek renkli bir arka planın üzerinde görünmez.

Örnek

Giriş

Arka plan: %20 opaklıkta beyaz · Bulanıklık: 10px · Kenarlık opaklığı: %30 · Yarıçap: 16px

Çıkış

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);
border-radius: 16px;

Giriş panellerinde, gezinme çubuklarında ve renkli veya fotoğraflı arka planlar üzerindeki panel widget'larında kullanılan klasik buzlu cam kart stili.

Safari ve tarayıcı desteği

backdrop-filter, güncel Chrome, Firefox, Edge ve Safari sürümlerinde desteklenmektedir, ancak Safari tarihsel olarak bulanıklığı render etmek için önek almamış özelliğin yanında -webkit-backdrop-filter önekini de gerektirmiştir — bu önek olmadan eski Safari sürümleri bulanıklığı sessizce yok sayar ve yalnızca düz saydam arka planı gösterir. Bu araç bu nedenle her zaman her iki bildirimi de oluşturur.

Güncel tarayıcı uyumluluk ayrıntıları için MDN'nin backdrop-filter belgelerine bakın: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Glassmorphism neden arkasında bir şeye ihtiyaç duyar

backdrop-filter yalnızca öğenin görsel olarak arkasında bulunan şeyi bulanıklaştırır — bir arka plan görseli, bir gradyan, başka bir renkli öğe veya altında kayan içerik. Düz beyaz veya tek renkli bir arka plan üzerinde bulanıklaştırılacak hiçbir şey yoktur, bu yüzden efekt görünmez olur ve öğe yalnızca hafif renklendirilmiş, yuvarlatılmış bir kutu gibi görünür. Efektin doğru görünmesi için glassmorphism öğelerini her zaman bir gradyan, fotoğraf veya başka türlü ayrıntılı bir arka planın üzerine yerleştirin.

Diğer CSS efektleriyle birlikte kullanma

Glassmorphism kartları genellikle ekstra derinlik için altına hafif bir box-shadow eklenerek kullanılır. Buzlu cam CSS kodunu burada oluşturun, ardından Kutu Gölgesi Oluşturucu ile yumuşak bir gölge ekleyin ve her iki bildirimi de aynı öğeye uygulayın.

→ Kutu Gölgesi Oluşturucu · Kenar Yarıçapı Oluşturucu

Sıkça Sorulan Sorular

Cam efekti sayfamda neden görünmüyor?

backdrop-filter, öğenin arkasında bulunan şeyi bulanıklaştırır. Öğeniz düz beyaz veya tek renkli bir arka planın üzerindeyse, bulanıklaştırılacak görsel açıdan ilginç bir şey olmadığından yalnızca hafif renklendirilmiş bir kutu gibi görünür. Buzlu cam efektinin görünür olması için öğeyi bir gradyan, görsel veya başka ayrıntılı bir arka planın üzerine yerleştirin.

-webkit-backdrop-filter önekine ihtiyacım var mı?

Evet, efektin Safari'de güvenilir bir şekilde görüntülenmesini istiyorsanız gereklidir. Bu araç, Safari'nin bulanıklığı uygulamak için tarihsel olarak bu öneke ihtiyaç duymasından dolayı, standart backdrop-filter ile -webkit- önekli sürümü her zaman birlikte oluşturur.

Arka plan opaklığı ile bulanıklık arasındaki fark nedir?

Arka plan opaklığı, seçtiğiniz renk tonunun ne kadarının göründüğünü ve arkasındaki içeriğin ne kadarının değişmeden göründüğünü kontrol eder. Bulanıklık ise görünen bu arka planın ne kadar bulandırıldığını/yumuşatıldığını kontrol eder. Glassmorphism, yalnızca birini değil, biraz saydamlık ve biraz bulanıklığı birlikte kullanır.

backdrop-filter'ı herhangi bir öğede kullanabilir miyim?

Evet, ancak yalnızca sayfanın render edilmesinde o öğenin görsel olarak arkasında bulunanı etkiler, öğenin kendi alt öğelerini değil. Ayrıca birçok öğeye uygulandığında veya sık sık animasyonlu kullanıldığında bazı cihazlarda performans maliyeti vardır, bu nedenle onlarca küçük öğe yerine kartlar, modallar veya gezinme çubukları gibi az sayıda öne çıkan arayüz yüzeyi için kullanılması en iyisidir.

Kenarlığım neden zar zor görünüyor?

Bu araçtaki kenarlık, kasıtlı olarak ince tutulan yarı saydam beyaz kullanır — cam panelin sert, opak bir çerçeve gibi görünmeden ayrı bir yüzey olarak algılanmasına yardımcı olan hafif bir kenar. Daha belirgin bir kenar istiyorsanız kenarlık opaklığı kaydırıcısını yükseltin.