rikidaniel.
Tools

Generator Glassmorphism

Rancang efek glassmorphism modern dengan kontrol blur, transparansi, saturasi, dan border.

Glassmorphism

Efek kaca indah dengan backdrop blur

Kode CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(1.8);
  -webkit-backdrop-filter: blur(10px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
}

Panduan Glassmorphism Generator

Kapan alat ini berguna?

Efek kaca menggabungkan latar transparan, blur pada area di belakang elemen, dan border ringan. Efek akan paling terlihat bila ada variasi warna atau gambar di belakang kartu. Gunakan opacity yang cukup agar isi kartu tetap terbaca ketika latarnya berubah.

Contoh penggunaan

Letakkan kartu preview di atas latar berwarna, naikkan blur secara bertahap, lalu atur transparansi dan border. Salin CSS ke container. Uji kembali dengan teks lebih panjang dan tombol, karena preview dekoratif belum mewakili seluruh kebutuhan komponen nyata.

Batasan dan pemeriksaan hasil

Backdrop blur dipengaruhi dukungan browser dan susunan layer halaman. Sediakan background yang tetap terbaca ketika efek tidak diterapkan. Ukur performa bila banyak elemen memakai blur, khususnya pada ponsel dan halaman yang sering bergulir.

Alat terkait