Secara intuitif menghasilkan efek UI modern seperti Glassmorphism dan Neumorphism.
Sesuaikan backdrop-filter dan dapatkan kode CSS yang siap disalin & ditempel.
Prasetel (12 jenis) → Gulir
Editor
Glassmorphism
Modern UI CSS Generator
Kode Dihasilkan
📖 Tentang
Glassmorphism adalah tren desain UI yang menciptakan tekstur kaca buram dengan membuat latar belakang semi-transparan dan menerapkan efek buram (backdrop-filter: blur()). Ini banyak diadopsi di macOS/iOS Apple dan Windows Fluent Design System.
Dengan alat ini, Anda dapat menerapkan 12 jenis prasetel dengan satu klik, dan menyesuaikan 4 fungsi backdrop-filter secara terpisah: blur, brightness, saturate, dan contrast. Anda juga dapat menyempurnakan batas, bayangan, dan sudut membulat dengan slider, dan menyalin kode dalam format CSS atau variabel CSS.
🔰 Cara Menggunakan
Pilih prasetel atau sesuaikan dengan slider
Klik gaya pilihan Anda dari galeri prasetel di atas. Jika mulai dari awal, sesuaikan setiap properti dengan slider.
Periksa pratinjau
Periksa efek secara real-time di area pratinjau. Anda dapat menguji 6 pola latar belakang dengan tombol sakelar latar belakang.
Salin kode
Pilih format pilihan Anda dari CSS atau variabel CSS, klik tombol 📋 untuk menyalin, dan tempel langsung ke proyek Anda.
📚 Panduan Properti
- backdrop-filter: blur()
- Memburamkan area di belakang elemen. Semakin besar nilainya, semakin kuat efek kaca buramnya. Ini adalah properti inti dari Glassmorphism.
- backdrop-filter: brightness()
- Menyesuaikan kecerahan latar belakang. 100% adalah default. 200% membuatnya dua kali lebih terang, dan 0% membuatnya gelap gulita.
- backdrop-filter: saturate()
- Menyesuaikan saturasi latar belakang. 100% adalah default. 0% membuatnya monokrom, dan 200% menjadikannya warna hidup yang sangat jenuh.
- backdrop-filter: contrast()
- Menyesuaikan kontras latar belakang. 100% adalah default. Meningkatkan nilai menekankan perbedaan antara terang dan gelap.
- Awalan Vendor
- Disarankan untuk menyertakan
-webkit-backdrop-filteruntuk dukungan Safari. Ini disertakan secara otomatis dalam kode output alat ini.
❓ FAQ
- Q. Apakah backdrop-filter didukung di semua browser?
- A. Didukung di versi terbaru dari browser utama seperti Chrome, Edge, Safari, dan Firefox. IE11 tidak didukung, tetapi disarankan menggunakan desain cadangan yang hanya menggunakan warna latar belakang semi-transparan.
- Q. Apa perbedaan antara Neumorphism dan Glassmorphism?
- A. Glassmorphism menggunakan backdrop-filter untuk membuat efek 'kaca buram', yang mewakili tumpang tindih elemen (sumbu Z). Neumorphism menggunakan kontras terang dan gelap dari box-shadow untuk mewakili 'tonjolan'.
- Q. Apakah itu memengaruhi kinerja?
- A. Karena backdrop-filter menggunakan komposisi GPU, penggunaan moderat tidak masalah. Namun, menerapkan nilai blur yang tinggi ke seluruh halaman dapat mengurangi frame rate.
- Q. Bisakah saya menggunakan kode yang dihasilkan apa adanya?
- A. Ya. Cukup tempel CSS yang disalin ke stylesheet Anda untuk menerapkannya. Anda dapat mengubah nama kelas sesuai kebutuhan.
💡 Kasus Penggunaan
Bilah Navigasi
UI ramping di mana bilah navigasi semi-transparan memburamkan latar belakang saat menggulir.
Modal & Dialog
Memburamkan latar belakang untuk fokus pada modal, memvisualisasikan hierarki konten.
Kartu UI & Harga
Menciptakan nuansa premium dan canggih dengan efek kaca buram pada tabel harga dan kartu fitur.
Dasbor
Digunakan di panel dasbor SaaS untuk mempertahankan keterbacaan bahkan di atas latar belakang yang kompleks.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.