tools.css_glassmorphism.how_to_title
1
common.step 1Bulanıklık, saydamlık ve gölge kaydırıcılarını ayarlayın.
2
common.step 2Farklı arkaplan temaları üzerinde canlı kartı test edin.
3
common.step 3Hazır CSS veya Tailwind kodunu kopyalayın.
Tarayıcıda İşlenirYeni
CSS Gölge & Cam
Buzlu cam (Glassmorphism), derinlik gölgeleri ve arka plan filtreleri için interaktif CSS ve Tailwind kodları üretin.
Hazır Stiller:
Cam & Gölge Parametreleri
Bulanıklık (Blur)16px
Arkaplan Saydamlığı20%
Kenarlık1px
Kenarlık Opasite30%
Köşe Yuvarlaklığı (Radius)16px
Gölge Y Ekseni20px
Gölge Yayılımı40px
Cam Rengi
#ffffff
Önizleme Sahne Arkaplanı:
YAZILIM MOTORU
Glassmorphism UI
Ultra şık, modern yarı şeffaf cam efekti ve gölge önizlemesi.
CSS Kodu
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.25);tools.css_glassmorphism.faq_title
Buzlu cam efekti tüm tarayıcılarda çalışır mı?
Modern tarayıcıların tamamı backdrop-filter özelliğini destekler; kodumuz maksimum uyumluluk için -webkit önekini de içerir.
Tailwind CSS desteği var mı?
Evet, üretilen stiller hem standart CSS hem de Tailwind sınıf karşılıkları olarak sunulur.