Kartu Glassmorphism

Komponen kartu yang menerapkan efek “Glassmorphism” (efek kaca buram), sebuah tren yang sangat populer dalam desain web modern. Dengan memadukan latar belakang blur (backdrop-filter), warna semi-transparan, dan garis tepi (border) yang tipis, komponen ini mampu menciptakan antarmuka pengguna yang canggih dengan kedalaman visual yang elegan.

Glassmorphism

Ini adalah demo glassmorphism. Latar belakang yang tembus pandang dengan indah memberikan efek visual yang mengesankan seolah-olah konten melayang di udara.

Kode Implementasi

Silakan salin kode di bawah ini dan integrasikan ke dalam proyek Anda.

<div class="glass-container">
  <div class="glass-card">
    <h3 class="glass-title">Glassmorphism</h3>
    <p class="glass-text">
      Ini adalah demo glassmorphism. Latar belakang yang tembus pandang dengan indah memberikan efek visual yang mengesankan seolah-olah konten melayang di udara.
    </p>
  </div>
</div>
/* Latar belakang (untuk demo) */
.glass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Kartu utama glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.5rem;
  max-width: 360px;
}

.glass-title {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

Fitur Utama