Glassmorphism CSS oluşturucu
Canlı önizlemeyle buzlu cam kartlar oluşturun.
Bir glassmorphism kartının bulanıklığını, ton opaklığını, köşe yarıçapını ve kenarlığını ayarlayın, renkli arka plan üzerinde canlı görün, ardından tam CSS'i kopyalayın.
Arka plan rengi
Cam tonu
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
Glassmorphism nasıl oluşturulur
- Cam kartın arkasına bir arka plan rengi seçin.
- Ton rengini seçin ve opaklığını ayarlayın.
- Bulanıklık, kenarlık opaklığı ve yarıçapı kaydırıcılarla ayarlayın.
- Oluşturulan CSS'i projenize kopyalayın.
Sıkça sorulan sorular
Glassmorphism nedir?
Buzlu camı taklit eden bir arayüz stili: arka plan bulanıklığıyla yumuşatılmış, renkli zemin üzerinde yarı saydam bir panel.
CSS'te neden iki bulanıklık özelliği var?
webkit önekli özellik, Safari ve diğer ihtiyaç duyan tarayıcılarda etkinin çalışmasını sağlar.
backdrop-filter her yerde çalışır mı?
Tüm modern tarayıcılar destekler. Çok eski tarayıcılar bulanıklıksız sıradan bir yarı saydam panel gösterir.