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. Kaydırıcılar blur ve opaklığı marka arka planınıza uydurmanıza yardım eder.

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.

CSS'im sunucuya gider mi?

Hayır. Oluşturma tamamen bu tarayıcı sekmesinde çalışır.

Günlük limit var mı?

Hayır. Bu oluşturucu ücretsiz planda sınırsızdır.

Easy24 işine yaradıysa kahve ısmarla

Araçlar tarayıcıda ücretsiz kalır. Kreosus üzerinden tek seferlik destek verirsin. Türkiye kartları geçer.

Kahve ısmarla

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ç