CSS Glassmorphism

Bulanıklık, opaklık, ton, doygunluk ve canlı backdrop önizlemeli buzlu cam CSS oluştur.

GizliTarayıcıdaAnındaLimitsiz

Yumuşak gölge

Bulanıklık 16px

Opaklık 25%

Yarıçap 16px

Kenarlık kalınlığı 1px

Kenarlık opaklığı 35%

Doygunluk 120%

CSS çıktısı

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

backdrop-filter desteği gerekir. Safari -webkit-backdrop-filter ister. Eski tarayıcılarda yalnızca düz arka plan görünür.

Önizleme

Easy

Nasıl çalışır

Ton ve şablon seç

Açık veya koyu buzlu cam seçin veya blur ve opaklık için şablondan başlayın.

Blur ve kenarlığı ayarla

Blur, opaklık, yarıçap, kenarlık gücü ve doygunluğu ayarlayın. Derinlik için gölgeyi aç/kapat.

CSS kopyala

Renkli arka planlar üzerinde önizleyin, glassmorphism.css kopyalayın veya indirin.

Neden glassmorphism CSS?

Buzlu paneller ağır görseller olmadan derinlik katar. CSS Glassmorphism, Easy24’ün geliştirici araçlarından biridir. Normal kullanımda girdin bu sekmede kalır; Easy24 bu içeriği işlemek için yüklemez. Bu aracın günlük ücretsiz plan tavanı yoktur; istediğin kadar kullan. Tipik akış: Bulanıklık, opaklık ve tonu ayarla, arka plan önizlemesi seç, CSS'i kopyala veya indir. Takip adımı yaygınsa sayfada ilgili araçlar ve ters dönüşümler görünür.

Neden bu araç

Canlı backdrop-filter önizleme
Açık ve koyu cam tonları
Blur, opaklık, yarıçap, doygunluk
Beş şablon ve beş arka plan
WebKit öneki dahil
Sınırsız kullanım: günlük limit yok

Sorular

CSS Glassmorphism ne yapar?

backdrop-filter blur ve yarı saydam arka planlarla buzlu cam panel CSS'i üretir.

Önizlemede neden blur yok?

backdrop-filter öğenin arkasındaki içeriği bulanıklaştırır. Renkli arka plan ve destekleyen tarayıcı gerekir.

Doygunluk ne işe yarar?

Camdan görünen renkleri güçlendirir: modern cam UI stillerinde yaygındır.

-webkit öneki gerekli mi?

Safari hâlâ -webkit-backdrop-filter'dan faydalanır. Bu araç ikisini de çıktı verir.

Easy24 işine yaradıysa kahve ısmarla

Araçlar ücretsiz kalır. Teşekkür etmek istersen tek seferlik bağış yapabilirsin.

Kahve ısmarla

CSS Glassmorphism ne zaman kullanılır

İnsanlar CSS Glassmorphism aracına, hızlı bir iş için masaüstü yazılım kurmak veya hesap açmak istemediklerinde gelir. Bulanıklık, opaklık, ton, doygunluk ve canlı backdrop önizlemeli buzlu cam CSS oluştur. Geliştirici yardımcıları küçük işlerde sürtünmeyi azaltır: biçimlendirme, parçacıklar, renkler, yükleyiciler ve diğer ön yüz yardımcıları. Yalnızca CSS Glassmorphism için masaüstü paketi kurmakla kıyaslandığında, özel bir sayfa arayüzü küçük ve amacı net tutar. Kota çerezleri anonim günlük ücretsiz plan kullanımlarını izleyebilir. Bu, dosya baytlarınızı veya yapıştırılan metni almak demek değildir. Bu sayfanın günlük ücretsiz plan tavanı yoktur; istediğiniz kadar çalıştırabilirsiniz. Ücretsiz plan limiti varsa çalışma alanı indirmeden önce kalan kullanımları gösterir, böylece uzun bir bekleyişten sonra sürpriz olmaz. Easy24’te araç sayfaları İngilizce ve Türkçe senkron tutulur; davranış aynı kalır.

Benzer Geliştirici araçları

Tümünü gör

JSON Biçimlendirici

Geliştirici

JSON'u tarayıcıda güzelleştir, küçült, doğrula ve anahtarları sırala. 2 veya 4 boşluk girinti, dosya içe aktarma ve indirme.

Aç

Meta Etiket Üretici

Geliştirici

SEO başlık, açıklama, Open Graph, Twitter Card ve canonical etiketlerini canlı sosyal önizleme ile oluştur. Tarayıcıda çalışır.

Aç

CSS Gradyan Oluşturucu

Geliştirici

Doğrusal ve radyal CSS gradyanları tasarla; üç renk durağına kadar. Canlı önizleme, hazır şablonlar, hex girişi, kopyala veya indir.

Aç