Desain / CSS

Generator CSS Glassmorphism (Efek Kaca Buram)

Buat tampilan kaca buram dengan CSS backdrop-filter: sesuaikan blur, warna tint, opacity, saturasi, border, dan radius sudut di atas pratinjau penuh warna, lalu salin CSS yang berfungsi di semua browser modern saat ini.

Generator CSS Glassmorphism (Efek Kaca Buram): backdrop-filter: blur() memburamkan apa pun yang berada di belakang elemen, sedangkan saturate() membuat warna tersebut lebih kaya. Latar belakang semi-transparan memberi tint pada kaca, dan border terang yang samar menonjolkan tepinya, seperti pada kaca asli. Baris dengan prefiks -webkit- mendukung Safari sebelum versi 18. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Generator glassmorphismPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Kaca buramWarna di belakang kartu ini dibuat buram.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Efek ini memerlukan sesuatu yang berwarna di belakang elemen: backdrop-filter memburamkan apa pun yang berada di bawahnya, sementara latar belakang semi-transparan membuatnya tetap terlihat. Baris -webkit- digunakan untuk Safari sebelum versi 18. Pastikan teks di atas kaca memiliki kontras yang cukup di setiap bagian latar belakang.

Aksesibilitas

Sebagian pengguna mengaktifkan pengurangan transparansi di pengaturan sistem mereka. Media query prefers-reduced-transparency, yang didukung di browser berbasis Chromium, dapat mengganti kaca dengan latar solid untuk pengguna tersebut.

Dipadukan dengan bayangan

Bayangan yang lembut dan lebar membuat kartu tampak terangkat dari latar belakang; sesuaikan dengan generator box shadow, lalu ganti baris box-shadow.

Cara menggunakannya

  1. Atur blur, opacity, dan saturasi.
  2. Pilih tint, border, dan radius sudut.
  3. Salin CSS dan letakkan elemen di atas latar belakang penuh warna.

Privasi & batasan

Semua proses berjalan di browser Anda.

Alat terkait

Box ShadowGradasi CSSpola CSS

Pertanyaan umum

Mengapa kaca saya terlihat polos?

Harus ada sesuatu yang penuh warna atau memiliki detail di belakangnya; di atas warna polos, blur tidak memiliki apa pun untuk diburamkan.

Apakah backdrop-filter lambat?

Properti ini lebih membebani performa daripada sebagian besar CSS, terutama saat area besar bergulir di atas konten yang bergerak; buat area yang diburamkan tetap kecil dan hindari menumpuk banyak area blur.

Apakah teksnya mudah dibaca?

Periksa hasilnya: kontras berubah mengikuti latar belakang. Tint yang lebih gelap, opacity yang lebih tinggi, atau text shadow dapat membantu.

Alat gratis · berjalan di browser anda · tanpa perlu akun