Cam Kart Oluşturucu

Bulanık, gradyanlı glassmorphism kartları tasarla, canlı önizleme.

Kart Özellikleri

Arka Plan Bulanıklığı: 10px

Arka Plan Opaklığı: 7%

Kenarlık Opaklığı: 30%

Kenarlık Yarıçapı: 20px

Kenarlık Genişliği: 1px

İç Parıltı Opaklığı: 5%

Arka Plan Rengi

Kenarlık Rengi

Kart Öğeleri İçeriği

Cam Kart

İnce kırılma ve kenarlık vurgularıyla premium etkileşimli bir bileşen.

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Nasıl çalışır

Bir glassmorphism kartı için bulanıklığı, vurguları, iç parıltıları ve arka planı ayarlayın.
Siz ince ayar yaptıkça canlı önizlemenin güncellenmesini izleyin.
Efekti tasarımınıza uydurun.
Temiz HTML, CSS ya da bir Tailwind yapılandırması kopyalayın.

Ne için kullanılır

Modern bir arayüz için buzlu cam kartı oluşturmak.
Bir glassmorphism efekti için üretim CSS'i almak.
Tailwind'e hazır bir cam bileşeni dışa aktarmak.

Bilmekte fayda var

Cam görünümü backdrop-filter'a ve arkasındaki karmaşık bir arka plana dayanır; düz bir renk üzerinde efekt belirsizdir.
backdrop-filter desteği değişir; hedef tarayıcılarınızda test edin ve bir yedek sağlayın.

Sıkça sorulan sorular

Hangi çıktıyı kopyalayabilirim?

Temiz HTML, düz CSS ya da bir Tailwind yapılandırması — yapınıza hangisi uyuyorsa.

Sayfamda cam neden düz görünüyor?

Glassmorphism bulanıklaştıracak görsel içeriğe ihtiyaç duyar. Düz bir arka plan üzerinde buzlaştıracak bir şey yoktur, bu yüzden onu bir görsel ya da gradyan üzerine yerleştirin.

Herhangi bir şey yükleniyor mu?

Hayır. Oluşturucu tamamen tarayıcınızda çalışır.

İlgili araçlar

DXF Görüntüleyici

Renk Paleti

Renk Dönüştürücü

CSS Kutu Gölgesi Oluşturucu

Kontrast Kontrolcüsü