Glassmorphism ve Neumorphism gibi modern UI efektlerini sezgisel olarak oluşturun.
backdrop-filter'ı ayarlayın ve kopyalayıp yapıştırmaya hazır CSS kodu elde edin.
Ön Ayarlar (12 tür) → Kaydır
Düzenleyici
Glassmorphism
Modern UI CSS Generator
Oluşturulan Kod
📖 Hakkında
Glassmorphism, arka planı yarı saydam hale getirerek ve bir bulanıklık efekti (backdrop-filter: blur()) uygulayarak buzlu cam dokusu oluşturan bir UI tasarım trendidir. Apple'ın macOS/iOS'unda ve Windows Fluent Tasarım Sistemi'nde yaygın olarak benimsenmiştir.
Bu araçla, 12 tür ön ayarı tek bir tıklamayla uygulayabilir ve 4 backdrop-filter işlevini ayrı ayrı ayarlayabilirsiniz: bulanıklık, parlaklık, doygunluk ve kontrast. Ayrıca kaydırıcılarla kenarlıklara, gölgelere ve yuvarlatılmış köşelere ince ayar yapabilir ve kodu CSS veya CSS değişkeni biçiminde kopyalayabilirsiniz.
🔰 Nasıl Kullanılır
Bir ön ayar seçin veya kaydırıcılarla ayarlayın
Yukarıdaki ön ayar galerisinden tercih ettiğiniz stili tıklayın. Sıfırdan başlıyorsanız, her bir özelliği kaydırıcılarla ayarlayın.
Önizlemeyi kontrol edin
Önizleme alanında efekti gerçek zamanlı olarak kontrol edin. Arka plan değiştirme düğmesiyle 6 arka plan desenini test edebilirsiniz.
Kodu kopyalayın
CSS veya CSS değişkenlerinden tercih ettiğiniz formatı seçin, kopyalamak için 📋 düğmesine tıklayın ve doğrudan projenize yapıştırın.
📚 Özellik Kılavuzu
- backdrop-filter: blur()
- Elemanın arkasındaki alanı bulanıklaştırır. Değer ne kadar büyük olursa, buzlu cam efekti o kadar güçlü olur. Bu, Glassmorphism'in temel özelliğidir.
- backdrop-filter: brightness()
- Arka planın parlaklığını ayarlar. %100 varsayılandır. %200 iki kat daha parlak yapar ve %0 simsiyah yapar.
- backdrop-filter: saturate()
- Arka planın doygunluğunu ayarlar. %100 varsayılandır. %0 tek renkli yapar ve %200 aşırı doygun canlı bir renk yapar.
- backdrop-filter: contrast()
- Arka planın kontrastını ayarlar. %100 varsayılandır. Değeri artırmak aydınlık ve karanlık arasındaki farkı vurgular.
- Tarayıcı Öneki (Vendor Prefix)
- Safari desteği için
-webkit-backdrop-filtereklenmesi önerilir. Bu aracın çıktı koduna otomatik olarak eklenir.
❓ SSS
- Q. backdrop-filter tüm tarayıcılarda destekleniyor mu?
- A. Chrome, Edge, Safari ve Firefox gibi başlıca tarayıcıların en son sürümlerinde desteklenir. IE11 desteklenmez, ancak yalnızca yarı saydam bir arka plan rengi kullanan bir geri dönüş tasarımı önerilir.
- Q. Neumorphism ve Glassmorphism arasındaki fark nedir?
- A. Glassmorphism, eleman örtüşmesini (Z ekseni) temsil eden bir 'buzlu cam' efekti oluşturmak için backdrop-filter kullanır. Neumorphism, 'tümsekleri' temsil etmek için box-shadow açık ve koyu kontrastını kullanır.
- Q. Performansı etkiler mi?
- A. backdrop-filter GPU oluşturmayı kullandığından, orta düzeyde kullanım sorun değildir. Ancak tüm sayfaya yüksek blur değerleri uygulamak kare hızını düşürebilir.
- Q. Oluşturulan kodu olduğu gibi kullanabilir miyim?
- A. Evet. Uygulamak için kopyalanan CSS'yi stil sayfanıza yapıştırmanız yeterlidir. Sınıf adını gerektiği gibi değiştirebilirsiniz.
💡 Kullanım Örnekleri
Gezinme Çubuğu (Navigation Bar)
Yarı saydam gezinme çubuğunun kaydırırken arka planı bulanıklaştırdığı şık bir kullanıcı arayüzü.
Modallar ve İletişim Kutuları
İçeriğin hiyerarşisini görselleştirerek modala odaklanmak için arka planı bulanıklaştırır.
Kart UI ve Fiyatlandırma
Fiyatlandırma tablolarında ve özellik kartlarında buzlu cam efektiyle birinci sınıf ve gelişmiş bir his yaratır.
Gösterge Panelleri (Dashboards)
SaaS gösterge panellerinde karmaşık arka planlarda bile okunabilirliği korumak için kullanılır.
Geri Bildirim Gönder
Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.
Geri bildirim geçici olarak askıya alındı
Sunucu meşgul veya spam koruması etkin. Lütfen daha sonra tekrar deneyin.