Rancang permukaan CSS glassmorphism dan neumorphism dengan pratinjau langsung.
Terakhir diperbarui
Coddy mengajarimu dengan menulis kode sungguhan di browser: pelajaran interaktif, umpan balik instan, dan bantuan AI saat kamu buntu.
*Glassmorphism* dan *neumorphism* adalah dua gaya permukaan yang banyak kamu temui di desain web modern. **Kaca** adalah tampilan panel buram: kartu tembus pandang yang mengaburkan apa pun di belakangnya, sering ditaruh di atas gradien warna-warni atau latar foto. **Neumorphism** adalah tampilan plastik lembut: kartu yang tampak menonjol (atau tenggelam) dari permukaannya, disinari pasangan bayangan terang dan gelap dengan rona yang sama dengan latar.
Kedua efek ini murni CSS: tanpa gambar, tanpa JavaScript, tanpa library. Kaca mengandalkan backdrop-filter: blur() plus isian tembus pandang dan border tipis. Neumorphism dibangun dari sepasang deklarasi box-shadow: satu sedikit lebih gelap dari permukaan, satu sedikit lebih terang, digeser ke arah berlawanan. Hitungannya singkat, tetapi menyetel nilainya dengan tangan sampai semuanya pas butuh waktu. Generator melewati langkah itu.
Alat ini memberimu slider untuk setiap parameter yang penting, panel pratinjau di atas latar yang bisa diatur (supaya efek kaca benar-benar punya sesuatu untuk dibiaskan), dan salin CSS hasilnya dalam satu klik. Semuanya berjalan di browsermu, jadi tempel potongannya langsung ke stylesheet-mu.
backdrop-filter adalah property yang menggerakkan glassmorphism: property ini mengaburkan dan menambah saturasi apa pun yang ada *di belakang* elemen, bukan elemennya sendiri.rgba(...) dengan alpha rendah) dan border terang tipis agar terlihat seperti bahan buram sungguhan. Hilangkan salah satunya dan efeknya runtuh.box-shadow, bukan satu: bayangan lebih gelap di kanan bawah dan sorotan lebih terang di kiri atas, keduanya memakai rona permukaan, bukan hitam/putih murni.inset pada bayangannya: angkanya sama, arah visualnya berlawanan (tertekan ke dalam, bukan menonjol keluar).Beralih antara **Kaca** dan **Neumorphism** di bagian atas. Kaca butuh latar, sedangkan neumorphism berada di atas warna permukaan datar yang kamu atur.
Untuk kaca, pengungkit utamanya adalah *blur* (seberapa kuat latar dikaburkan), *opasitas latar* (seberapa tembus pandang kartunya), dan *tint* (semburat warna tipis). Untuk neumorphism, pengungkit utamanya adalah *jarak* (seberapa jauh bayangan digeser), *blur* (seberapa lembut bayangannya), dan *intensitas* (seberapa jauh bedanya pasangan terang/gelap dari permukaan).
Kaca paling bagus di atas gradien atau foto yang mencolok. Neumorphism paling bagus di atas warna lembut yang sedikit melenceng dari warna murni (#e0e5ec adalah "abu-abu neumorphic" yang klasik). Alat ini menyediakan sederet preset yang bisa kamu klik.
Neumorphism punya tiga varian: **Timbul** (menonjol), **Datar** (bayangan sama, tanpa isian gradien), dan **Cekung** (tertekan ke dalam). Coba ketiganya: hitungan bayangannya sama, hanya arahnya yang berubah.
Tekan **Salin** dan tempel potongannya ke stylesheet-mu. Outputnya siap production: sudah berisi -webkit-backdrop-filter dengan prefix vendor untuk Safari lama, property yang berurutan, dan border-radius yang sesuai sehingga bisa dipakai sebagai satu class.
Property yang benar-benar diandalkan setiap efek. Referensi lengkapnya ada di halaman MDN backdrop-filter dan box-shadow.
| Gaya | Property utama | Yang perlu disetel | Catatan |
|---|---|---|---|
| Kaca | backdrop-filter, background tembus pandang, border tipis | Blur, saturasi, alpha | Selalu atur -webkit-backdrop-filter agar kompatibel dengan Safari |
| Neumorphism (timbul) | Dua deklarasi box-shadow + isian linear gradient | Jarak, blur, intensitas terang/gelap | Warna bayangan harus mengikuti rona permukaan, bukan hitam/putih murni |
| Neumorphism (cekung) | Dua deklarasi box-shadow inset | Kontrol yang sama dengan timbul | Cekung terasa seperti tombol yang ditekan atau field input yang tenggelam |
| Gabungan / hibrida | Kaca di atas pelat neumorphic | Tumpuk dengan hati-hati: terlalu banyak filter menurunkan performa | Umum di dashboard: kartu neumorphic, header overlay kaca |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Glassmorphism klasik. saturate(180%) menambahkan sedikit warna cerah di belakang blur. Tanpanya, kaca buram terlihat pucat. Taruh ini di atas gradien hero atau foto.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;Dua bayangan ini yang bekerja keras: yang lebih gelap di kanan bawah dan sorotan yang lebih terang di kiri atas. Isian gradien menambahkan kilau halus yang dibaca mata sebagai "plastik".
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Tambahkan inset ke kedua bayangan dan kartunya terlihat tenggelam, bukan menonjol. Cocok untuk field input dan latar toggle.
-webkit-backdrop-filter. Safari lama (dan WebView tertanam mana pun) mengabaikan backdrop-filter tanpa prefix, dan kacamu berubah menjadi blok padat.backdrop-filter. Setiap lapisan adalah proses blur real-time di GPU. Tiga atau empat di layar yang sama, dan dashboard-mu mulai kehilangan frame.Glassmorphism adalah tampilan kaca buram: kartu tembus pandang dengan latar yang dikaburkan terlihat di baliknya. Neumorphism adalah tampilan plastik lembut: kartu buram yang tampak menonjol (atau tenggelam) ke permukaannya memakai pasangan bayangan terang/gelap. Keduanya menyelesaikan masalah visual yang berbeda dan jarang muncul bersamaan.
-webkit-backdrop-filter selain property standar backdrop-filter. Generator ini otomatis menghasilkan keduanya. Tanpa prefix, Safari lama dan WebView iOS kembali ke warna background di bawahnya dan efek kacanya hilang.Neumorphism polos terkenal sulit dibuat aksesibel karena kontras antara kartu dan permukaan memang sengaja rendah. Kalau kamu memakainya, pasangkan dengan kontras teks yang kuat (≥ 4,5:1), focus ring yang terlihat, dan label ARIA di tombol yang hanya berisi ikon. Hindari neumorphism untuk elemen yang *harus* menonjol (error, CTA utama).
Ada dua penyebab umum: latarmu tidak berwarna (kaca di atas putih = tidak ada yang bisa dikaburkan), atau radius blur-mu terlalu kecil (di bawah sekitar 8px hampir tidak menggeser warna di belakangnya). Tambahkan gradien atau gambar di belakang kartu dan naikkan blur ke 12 sampai 20px.
backdrop-filter didukung di setiap browser evergreen. box-shadow didukung di mana-mana. Perhatikan saja performanya: backdrop-filter adalah operasi GPU per frame, jadi jumlah lapisan kaca di satu layar sebaiknya sedikit.