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

Transparansi dan Blur yang Menawan: Menggunakan backdrop-filter: blur() untuk merepresentasikan tekstur nyata menyerupai kaca buram.
Efek Tiga Dimensi: Perpaduan antara garis tepi semi-transparan dan drop shadow menciptakan ilusi optik seolah-olah kartu mengambang di atas latar belakang.
Fleksibilitas Tinggi: Menghasilkan tampilan yang harmonis dan estetis secara otomatis, baik di atas latar belakang berupa gradasi warna maupun gambar.