Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Glassmorphism CSS

PengembangMatematika

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Gaya Prasetel

Telah ditetapkan sebelumnya

Filter Latar Belakang

Buram (px): 10

Warna Latar Belakang

Warna

Opasitas (%): 20

Batas

Radius Bingkai (px): 16

Lebar Batas (px): 1

Warna Batas

Opasitas Batas (%): 30

Bayangan Kotak

Aktifkan Bayangan Kotak

Offset X (px): 0

Offset Y (px): 4

Buram Bayangan (px): 30

Sebaran Bayangan (px): 0

Warna Bayangan

Opasitas Bayangan (%): 10

Latar Belakang Pratinjau

Latar belakang

Warna Solid

Tampilkan Bentuk Mengambang

KELUARAN

Sisi klien

Pratinjau Langsung

Kartu Kaca

Ini adalah pratinjau efek glassmorphism

CSS yang Dihasilkan

IKLAN · HAPUS?

Memandu

Generator Glassmorphism CSS

Buat efek kaca berembun yang menakjubkan dengan editor visual langsung. Sesuaikan buram latar belakang, transparansi latar belakang, opasitas batas, radius batas, dan bayangan kotak secara real-time dan lihat hasilnya secara instan pada pratinjau berwarna. Salin CSS yang dihasilkan atau potongan kode HTML+CSS lengkap yang siap untuk proyek Anda, dengan awalan vendor untuk dukungan lintas-browser.

Cara Penggunaan

Gunakan slider untuk menyesuaikan properti glassmorphism: buram latar belakang mengontrol intensitas kaca berembun, warna latar belakang dan alfa mengatur corak, dan kontrol batas menambahkan tepi kaca yang halus. Pilih dari 6 latar belakang gradien dan alihkan bentuk mengambang untuk melihat bagaimana buram berinteraksi dengan konten di belakang kartu kaca. Pilih prasetel seperti Kaca Halus atau Kaca Gelap untuk titik awal cepat, lalu sesuaikan. Salin CSS atau potongan kode HTML+CSS lengkap ketika Anda puas dengan hasilnya.

Fitur

Pratinjau Langsung – Lihat efek glassmorphism diperbarui secara real-time saat Anda menyesuaikan kontrol apa pun
Kontrol Buram Latar Belakang – Slider dari 0 hingga 40px untuk mengatur intensitas kaca berembun
Latar Belakang RGBA – Pemilih warna dengan slider opasitas terpisah untuk kontrol transparansi yang tepat
Kontrol Batas & Bayangan – Sesuaikan lebar batas, warna, opasitas, radius, dan bayangan kotak opsional
Latar Belakang Gradien – 6 prasetel gradien berwarna dengan bentuk mengambang opsional untuk mendemonstrasikan efek buram
Prasetel Gaya – Prasetel satu klik: Kaca Halus, Berembun, Kaca Gelap, dan Kaca Berwarna
Awalan Vendor – CSS yang dihasilkan menyertakan -webkit-backdrop-filter untuk kompatibilitas Safari
Salin CSS atau HTML+CSS – Dapatkan hanya properti CSS atau potongan kartu lengkap yang siap ditempel

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu glassmorphism di CSS?

Glassmorphism adalah tren desain UI yang menciptakan tampilan kaca berembun menggunakan backdrop-filter CSS dengan blur yang dikombinasikan dengan warna latar belakang semi-transparan. Blur membuat konten di belakang elemen tampak lembut dan menyebar sementara latar belakang transparan menambahkan corak warna. Dipopulerkan oleh Apple's macOS Big Sur dan Windows 11 Fluent Design, glassmorphism menciptakan kedalaman dan hierarki visual dengan membiarkan elemen latar belakang terlihat sebagian. Properti CSS utama adalah backdrop-filter: blur(), background: rgba(), dan biasanya batas halus untuk meningkatkan tepi kaca.
Browser mana yang mendukung backdrop-filter?

Backdrop-filter didukung di Chrome 76 dan yang lebih baru, Safari 9 dan yang lebih baru (dengan awalan -webkit), Edge 79 dan yang lebih baru, Firefox 103 dan yang lebih baru, dan semua browser seluler modern. Safari memerlukan awalan -webkit-backdrop-filter yang disertakan secara otomatis oleh generator ini. Satu-satunya kekurangan yang patut dicatat adalah versi Firefox yang lebih lama sebelum 103 dan Internet Explorer yang tidak memiliki dukungan. Untuk browser yang tidak didukung, warna latar belakang semi-transparan masih memberikan efek lapisan berwarna, hanya tanpa blur. Dukungan browser secara keseluruhan di atas 95 persen pengguna global per tahun 2026.
Bagaimana backdrop-filter berbeda dari filter biasa di CSS?

Properti filter CSS menerapkan efek visual seperti blur pada elemen itu sendiri dan anak-anaknya. Backdrop-filter menerapkan efek yang sama hanya pada area di belakang elemen, membuat konten elemen tetap tajam dan mudah dibaca. Inilah yang menciptakan efek glassmorphism: teks pada kartu kaca tetap jernih sementara latar belakang di belakangnya tampak buram. Jika Anda menggunakan filter: blur() sebagai gantinya, teks di dalam kartu juga akan menjadi buram dan tidak terbaca. Backdrop-filter pada dasarnya menciptakan efek jendela di mana Anda melihat melalui kaca berembun.
Apa yang membuat desain glassmorphism yang bagus?

Glassmorphism yang efektif membutuhkan latar belakang yang berwarna atau detail agar buram terlihat. Latar belakang putih solid di belakang kaca terlihat identik dengan kartu biasa. Gunakan nilai blur antara 8 dan 20 piksel untuk sebagian besar kasus. Pertahankan opasitas latar belakang antara 10 dan 30 persen agar konten di belakang tetap terlihat sebagian. Tambahkan batas cahaya halus pada opasitas putih 10 hingga 30 persen untuk meningkatkan tepi kaca. Hindari menumpuk beberapa lapisan kaca karena setiap backdrop-filter menggandakan biaya kinerja. Pastikan kontras teks memenuhi standar aksesibilitas karena latar belakang semi-transparan dapat mengurangi keterbacaan.