Glassmorphism Oluşturucu

Tüm araçlar

Arka fon bulanıklığı, şeffaflık ve kenarlıklarla buzlu cam UI kartları oluşturun, ardından CSS'i kopyalayın.

Önizleme

Cam Kart

Canlı bir arka fon üzerinde süzülen buzlu cam.

Arka fon
CSS çıktısı
—

Hem backdrop-filter hem de -webkit-backdrop-filter çıktısı verir. Not: backdrop-filter eski tarayıcılarda (ör. 103 altı Firefox) desteklenmez; bunlar için düz bir yedek arka plan ekleyin.

px
%
px
Cam dolgusu
20%
Kenarlık
30%
Kalite hazır ayarları

Glassmorphism Oluşturucu Hakkında

Glassmorphism Generator, buzlu cam kart efektini oluşturur: arkasında ne olursa olsun bulanıklaştıran yarı saydam bir panel. Kaydırıcılar backdrop-filter bulanıklığını ve doygunluğunu, cam tonu rengini ve saydamlığını, kenarlık rengini ve opaklığını, köşe yarıçapını ve dış gölgeyi kontrol eder — her değişiklik canlı bir arka plan üzerinde anlık olarak render edilir, böylece efekti gerçekçi şekilde değerlendirebilirsiniz.

Dört kalite hazır ayarı — subtle, frosted, vivid ve dark glass — başlamanız için kanıtlanmış kombinasyonlar sunar. Dark hazır ayarı, aynı tarifin koyu arayüzlere nasıl uyum sağladığını gösterir; burada camı arka plandan ayırma işinin çoğunu ince, açık bir kenarlık yapar.

Oluşturulan CSS hem backdrop-filter'ı hem de Safari'nin gerektirdiği -webkit-backdrop-filter ön ekini içerir. Uyumluluk uyarısına dikkat edin: eski tarayıcılar (örneğin 103 sürümünden önceki Firefox) backdrop-filter'ı desteklemez, bu yüzden onlar için sağlam bir yedek arka plan gönderin.

Glassmorphism Oluşturucu Nasıl Kullanılır

  1. Bir hazır ayardan başlayın — subtle, frosted, vivid veya dark glass — veya varsayılanlardan.
  2. Backdrop filtresinin bulanıklığını ve doygunluğunu ayarlayın.
  3. Cam tonu rengini ve saydamlığını ayarlayın.
  4. Kenarlık rengini, kenarlık opaklığını, köşe yarıçapını ve dış gölgeyi ince ayarlayın.
  5. CSS'i kopyalayın — Safari için -webkit- ön ekli özelliği zaten içeriyor.

Sıkça sorulan sorular

Panele yarı saydam bir arka plan rengi verilir ve backdrop-filter: blur() arkasında render edilen her şeyi bulanıklaştırır. Bir doygunluk artışı bulanık renkleri canlı tutar ve ince, yarı opak bir kenarlık cam kenarını hissettirir.

backdrop-filter, öğede yarı saydam bir arka plan ve tarayıcı desteği gerektirir — Firefox bunu ancak 103 sürümünde etkinleştirdi. Safari, oluşturulan CSS'in zaten içerdiği -webkit-backdrop-filter ön ekine ihtiyaç duyar. Her zaman sağlam bir yedek arka plan tanımlayın.

Kontrast yönetimi. En yoğun olası arka plana karşı metin kontrast kurallarını geçene kadar bulanıklığı artırın veya saydamlığı azaltın ve kartın kenarının hem açık hem koyu bölgeler üzerinde görünür kalması için kenarlığı ekleyin.

İçerik hareket ettikçe tarayıcı arka planı yeniden bulanıklaştırdığı için bu, daha maliyetli CSS efektlerinden biridir. Onu düzinelerce üst üste kart yerine birkaç anahtar yüzeyde kullanın ve orta seviye mobil cihazlarda kaydırmayı test edin.

Evet, tamamen ücretsiz ve tarayıcı tabanlı — kaydırıcıları ayarlayın ve CSS'i hesap veya yükleme gerektirmeden kopyalayın.
Paylaş
İlgili Araçlar
E-posta İmza Oluşturucu 30 şablon arasından profesyonel bir HTML e-posta imzası tasarlayın, özelleştirin ve kaydedin. Ücretsiz
Simgeden PNG'ye Bootstrap Icons, Font Awesome ve diğerlerini özel PNG görsellerine dönüştür — ücretsiz, tarayıcında. Ücretsiz
Uygulama Simgesi Oluşturucu App Store ve Google Play için eksiksiz, mağazaya hazır bir uygulama simgesi seti oluşturun — logonuzdan üretilen birinci sınıf gradyan, mesh ve desen arka planları. Ücretsiz
Favicon Oluşturucu Bir logodan, bir yazı tipi simgesinden veya bir monogramdan eksiksiz bir favicon paketi oluşturun — favicon.ico, modern PNG'ler, Apple touch simgesi, PWA simgeleri, bir web manifesti ve HTML parçacığı. Ücretsiz
CSS Box Shadow Oluşturucu Kaydırıcılarla offset, bulanıklık, yayılım, renk, opaklık ve iç gölge seçeneklerini ayarlayarak katmanlı CSS box-shadow'lar oluşturun — gerçek bir öğede önizleyin ve yapıştırmaya hazır CSS'yi anında kopyalayın. Ücretsiz
CSS Köşe Yarıçapı Oluşturucu CSS border-radius'u canlı önizlemeyle görsel olarak tasarlayın ve üretime hazır kodu kopyalayın. Ücretsiz
Popüler aramalar
glassmorphism css oluşturucu css glassmorphism oluşturucu buzlu cam css efekti backdrop-filter blur css cam kart css oluşturucu css cam efekti yapıcı glassmorphism arka plan oluşturucu css bulanık kart oluşturucu
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.
Sorun bildir

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.