Modern buzlu cam (backdrop-filter) kartlarını, gradyanları ve CSS gölgelerini görsel olarak üretin.
Glassmorphism (Buzlu Cam Tasarım Trendi); modern kullanıcı arayüzlerinde (UI) derinlik, yarı saydamlık, canlı arka plan bulanıklığı ve zarif kenar ışıltıları oluşturarak macOS ve iOS estetiğinde sofistike bileşenler tasarlamayı sağlayan popüler bir tasarım dilidir. Ancak CSS backdrop-filter: blur(), yarı saydam RGBA renkleri, çok katmanlı gölgeler ve ince beyaz kenarlık sınırlarını uyum içinde ayarlamak tasarımcılar için zaman alıcıdır. Bu interaktif stüdyo, görsel kaydırıcılarla cam etkisini anında tasarlayıp temiz CSS kodu almanızı sağlar.
Örneğin bir web sitesi kahraman (hero) alanı veya gösterge paneli (dashboard) için modern bir cam kart tasarlamak isteyen bir geliştirici; bulanıklığı 16px, şeffaflığı %25, kenarlık parlaklığını 1px rgba(255, 255, 255, 0,2) olarak belirler. Canlı önizleme panelinde renkli arka plan üzerinde cam kartın derinliği anlık olarak test edilir. Sistem Safari ve eski tarayıcılar için gerekli -webkit-backdrop-filter ön eklerini de içeren üretime hazır CSS kodunu tek tıkla kopyalanabilir halde sunar.
Tüm görsel render ve CSS kod derleme işlemleri tamamen tarayıcınızın kendi grafik motorunda yürütülür. Tasarım stilleriniz, renk kodlarınız veya arayüz parametreleriniz hiçbir harici sunucuya iletilmez.
Glass CSS: background: rgba(255,255,255, α) + backdrop-filter: blur(Npx) + border: 1px solid rgba(255,255,255, β)
Yarı saydam zemin rengi, arkadaki katmanı bulanıklaştıran backdrop-filter ve ışık kırılmasını taklit eden ince yarı saydam kenarlık birleştirilerek cam efekti elde edilir.