CSS Glassmorphism Üretici

Özel bulanıklıklar, sınırlar ve kart çerçeveleriyle modern buzlu cam CSS kodu oluşturun, hazır kodu kopyalayın.

Cam Ton Rengi
Cam Panel Opaklığı: 20%
Arka Plan Bulanıklığı (Backdrop Blur): 12px
Kenarlık Rengi
Kenarlık Opaklığı: 25%
Cam Kenarlık Genişliği: 1px
Gölge Bulanıklık Yarıçapı: 32px
Gölge Opaklığı: 25%
Köşe Yumuşatma (Border Radius): 16px
Önizleme Arka Plan Teması
Cam Önizlemebackdrop-filter: blur(12px)
CSS Kod Çıktısı
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
Tailwind CSS Sınıf Eşdeğeri
bg-[rgba(255,255,255,0.2)] backdrop-blur-[12px] border-[1px]_solid_rgba(255,255,255,0.25)] rounded-[16px] shadow-[0_8px_32px_rgba(0,0,0,0.25)]
5.419 görüntülenmeVerileriniz tarayıcınızda işlenir, sunucuya hiçbir şey gönderilmez.

İlgili araçlar

JSON Biçimlendirici
JSON'u çevrimiçi doğrula, güzelleştir ve küçült. Her şey tarayıcında çalışır — ücretsiz ve gizli.
Base64 Çevirici
Base64 metnini tarayıcında anında kodla veya çöz. Ücretsiz ve gizli.
URL Encode
URL ve sorgu dizelerini tarayıcında anında kodla veya çöz. Ücretsiz ve gizli.
Renk Seçici
İstediğin rengi seç, CSS ve tasarım araçları için HEX, RGB ve HSL kodlarını anında al. Ücretsiz, gizli, tarayıcında çalışır.

Bu aracı tanıyalım

CSS Glassmorphism Üretici, popüler "buzlu cam" arayüz efektini görsel olarak tasarlamanızı ve eşleşen CSS kodunu anında almanızı sağlar. Bulanıklığı, saydamlığı ve rengi ayarlarken önizleme ve kod birlikte ve gerçek zamanlı olarak güncellenir — hiçbir veri herhangi bir sunucuya gönderilmez.

CSS Glassmorphism Üretici Nedir ve Neden Faydalıdır?

CSS Glassmorphism Üretici; bulanık bir arka plana, yumuşak bir kenarlığa ve hafif bir gölgeye sahip yarı saydam panellerden oluşan buzlu cam görünümünü, rgba() değerleriyle ve backdrop-filter söz dizimiyle elle uğraşmadan oluşturmanızı sağlayan ücretsiz bir tarayıcı aracıdır. Kartlar, modal pencereler, gezinme çubukları veya hero bölümleri için hızlı ve doğru bir cam panel stili isteyen ön uç geliştiriciler ve tasarımcılar için faydalıdır.

Temel Özellikler

  • Canlı Bulanıklık Kontrolü: Arka plan bulanıklık yarıçapını bir kaydırıcıyla 0 ile 30px arasında ayarlayın ve buzlu efektin nasıl değiştiğini anında görün.
  • Ayarlanabilir Saydamlık: Panelin arka plan saydamlığını tamamen şeffaftan tamamen opak'a kadar ayarlayın.
  • Özel Renk Tonu: Cam paneli renklendirmek için istediğiniz arka plan rengini seçin.
  • Koda Tıpatıp Eşleşen Canlı Önizleme: Önizleme kutusu ve kopyalanabilir CSS kodu, aynı stil değerlerinden üretilir; yani gördüğünüz şey her zaman kopyaladığınız şeydir.
  • Safari Uyumlu Çıktı: Üretilen kod, hem standart backdrop-filter özelliğini hem de Safari'nin gerektirdiği -webkit-backdrop-filter ön ekini içerir; böylece efekt tüm tarayıcılarda tutarlı şekilde görünür.
  • Tamamen İstemci Taraflı: Tüm renk ve bulanıklık hesaplamaları tarayıcınızda yerel olarak çalışır. Hiçbir stil verisi sunucuya gönderilmez.

Bu Aracı Nasıl Kullanırım?

  1. Arka planın ne kadar bulanıklaştırılacağını ayarlamak için Bulanıklık kaydırıcısını sürükleyin (0–30px).
  2. Cam panelin ne kadar şeffaf veya katı göründüğünü kontrol etmek için Saydamlık kaydırıcısını sürükleyin.
  3. Cam paneli renklendirmek için bir Renk seçin.
  4. Bulanıklık, saydamlık veya rengi ayarladıkça önizleme kutusunun anında güncellendiğini izleyin.
  5. Kod kutusundan üretilen CSS'i kopyalayın — background, backdrop-filter (-webkit- ön ekiyle birlikte), border, border-radius ve box-shadow özelliklerini içerir.

Bu İstemci Taraflı Aracı Neden Seçmelisiniz?

Glassmorphism efektini elle doğru şekilde oluşturmak, rgba() alfa değerleriyle, bulanıklık birimleriyle ve tarayıcı ön ekleriyle uğraşmak demektir. Bu araç, yüklendikten sonra tamamen çevrimdışı çalışırken, sıfır ağ isteği ve sıfır veri toplama ile bunların tümünü sizin için halleder.

Sıkça Sorulan Sorular (SSS)

Üretilen CSS neden -webkit-backdrop-filter içeriyor?

Safari, backdrop-filter özelliğini uygulamak için -webkit- ön ekini gerektirir. Üretici, cam efektinin Safari'de de Chrome, Firefox ve Edge'de olduğu gibi doğru çalışması için her iki özelliği birlikte üretir.

Önizleme, kopyalanan CSS koduyla aynı olduğu garanti mi?

Evet. Önizleme kutusu ve CSS kod kutusu aynı stil değerlerinden üretilir; yani önizlemede gördüğünüz bulanıklık, saydamlık ve renk, kopyaladığınız kodla tamamen aynıdır.

Bulanıklığı 0 veya saydamlığı %100 yaparsam ne olur?

Bulanıklığı 0 yapmak arka plan bulanıklığını kaldırır ve düz, yarı saydam bir panel bırakır. Saydamlığı %100 yapmak paneli tamamen katı hale getirir ve camsı, şeffaf görünümü ortadan kaldırır. Her iki değer de araç tarafından doğru şekilde işlenen geçerli CSS değerleridir.

Stil verilerim herhangi bir yere gönderiliyor mu?

Hayır. Tüm renk, bulanıklık ve saydamlık değerleri tarayıcınızda kalır. Hiçbir şey sunucuya yüklenmez veya saklanmaz.