Parçacıklara Dön
CSS / TailwindCSS

CSS Buzlu Cam Efekti

Modern UI kartları için backdrop-filter kullanan buzlu cam efekti.

cssglassblurbackdrop
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

text-emerald-400">"text-gray">/* Dark variant */
.glass-card-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
}

Nasıl Kullanılır

.glass-card sınıfını herhangi bir konteyner elemana uygulayın. En iyi efekt için renkli veya görsel arka plan üzerine yerleştirin. -webkit-backdrop-filter ön eki Safari uyumluluğunu sağlar.

İlgili Teknoloji

Tailwind CSS

Aklınızda Bir Proje mi Var?

Fikrinizi nasıl hayata geçirebileceğimizi konuşalım. İlk konseptten üretime hazır ürüne kadar — yanınızdayız.

veya ücretsiz görüşme ayarlayın