Lewati ke konten
ID

Generator glassmorphism CSS

Buat efek kaca buram (glassmorphism) dalam CSS: blur, transparansi, saturasi, garis tepi, dan bayangan, dengan pratinjau di latar warna-warni atau foto Anda.

  • Gratis
  • Tanpa daftar
  • Tanpa unggah file
  • Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Atur efek kaca buram (glassmorphism) secara langsung: kekuatan blur, opasitas dan warna kaca, saturasi, garis tepi terang, radius sudut, dan bayangan. Lihat di latar warna-warni atau foto Anda sendiri; kode CSS sudah mencakup versi Safari.

Kapan menggunakannya

Kartu dan panel antarmuka

Kartu buram di atas latar berwarna tampak modern dan ringan, banyak dipakai di dashboard dan landing page.

Bilah navigasi transparan

Bilah menu kaca memperlihatkan konten yang digulir di belakangnya sambil tetap terbaca.

Jendela modal

Mengaburkan latar memusatkan perhatian pada dialog tanpa sepenuhnya memisahkan pengunjung dari halaman.

Cara menggunakan

  1. Pilih latar warna-warni atau foto Anda sendiri.
  2. Atur blur, opasitas, warna, dan garis tepi kaca.
  3. Salin kode CSS kartu.

Cara kerjanya

Kode menggabungkan latar rgba() semi-transparan, backdrop-filter dengan blur() dan opsional saturate(), garis tepi putih tembus pandang yang meniru tepi kaca, radius sudut, dan bayangan lembut.

Pratinjau dirender browser Anda dengan kode yang persis sama: yang Anda lihat adalah yang akan dilihat pengunjung. Foto latar Anda tetap di perangkat.

Tips untuk hasil terbaik

  • Efek hanya terlihat di latar yang kontras: bentuk berwarna, gradien, atau foto.
  • Blur 10 hingga 16 px dan opasitas 15 hingga 25% memberi tampilan paling klasik.
  • Periksa keterbacaan teks di kartu: naikkan opasitas pada latar yang ramai.
  • Saturasi di atas 100% membuat warna yang terlihat melalui kaca lebih hidup.

Masalah umum dan solusinya

Blur tidak terlihat

backdrop-filter hanya bekerja jika latar elemen transparan atau semi-transparan dan ada sesuatu di belakangnya.

Berfungsi di semua browser kecuali Safari

Pastikan baris -webkit-backdrop-filter ada: Safari membutuhkannya.

Teks sulit dibaca

Naikkan opasitas latar, tambahkan bayangan teks, atau pilih latar yang lebih tenang.

Pertanyaan umum

Apa itu glassmorphism?

Gaya antarmuka di mana panel tampak seperti kaca buram: semi-transparan, panel mengaburkan apa yang ada di belakangnya. Gaya ini dipopulerkan oleh macOS Big Sur dan Windows 11.

Properti CSS apa yang membuat efek ini?

backdrop-filter: blur() mengaburkan latar di belakang elemen. Dipakai bersama latar semi-transparan; tanpa itu, blur tidak terlihat.

Apakah berfungsi di Safari?

Ya, dengan awalan -webkit-backdrop-filter, yang sudah ada di kode yang dihasilkan. Semua browser terbaru mendukung efek ini.

Apakah efek ini memperlambat halaman?

Blur dihitung oleh kartu grafis. Pada beberapa elemen tidak terasa; hindari pada area animasi yang sangat besar.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.