Glassmorphism Oluşturucu
Önizlemeli CSS glassmorphism efektleri oluşturun.
Cammorfizm
Modern arayüzler için bulanıklık ve şeffaflık ile donmuş cam efekt.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.4);
Cevrimici CSS glassmorphism efekt olusturucu
Glassmorphism (veya cam morfizmi), buzlu cam efektini simule eden bir arayuz tasarim trenddir. Apple'in macOS ve iOS tasariminda populer hale gelmistir ve bulanilik, saydamlik ve ince kenarliklarin birlesimi ile karakterize edilir.
Glassmorphism olusuturucumuz, efektin tum parametrelerini gorsel olarak ayarlamaniza olanak tanir: arka plan bulanilik seviyesi (backdrop-filter: blur), katman saydamligi, kenarlik rengi ve yogunlugu, ve kose yuvarlatma.
Olusturulan CSS kodu, Safari uyumlulugu icin hem standart backdrop-filter ozelligini hem de -webkit- onekini icerir. Kodu herhangi bir web projesine kopyalayabilir ve dogrudan kullanabilirsiniz.
Sıkça sorulan sorular
Tum tarayicilarla uyumlu mu?
backdrop-filter ozelligi Chrome, Safari, Edge ve Firefox (surum 103'ten itibaren) ile uyumludur. Safari icin -webkit- oneki gerekir ve ureticimiz bunu otomatik olarak ekler. Internet Explorer desteklemez.
Glassmorphism performansi etkiler mi?
Blur efekti, ozellikle mobil cihazlarda yuksek degerlerle GPU kaynaklari tuketebilir. Daha iyi performans icin ilimli blur degerleri (4-15px) kullanin ve efekti ayni anda az sayida ogeye uygulayin.
Calisma icin ozel bir arka plan gerekli mi?
Evet, glassmorphism'in bulaniklik efektinin gorunur olmasi icin elemanin arkasinda icerik (resimler, degradeler, renkler) gerektirir. Duz beyaz bir arka plan uzerinde efekt neredeyse gorunmez olacaktir.