Generator CSS Neumorphism
Buat CSS soft UI (neumorphism): bayangan terang dan gelap yang diturunkan dari warna dasar Anda, bentuk datar, cekung, cembung, atau ditekan, dan empat arah cahaya.
Pengaturan neumorfisme
Bayangan terang dan gelap diturunkan dari warna dasar dengan menaikkan dan menurunkan kecerahan OKLCH-nya sesuai intensitas. Gunakan warna yang sama untuk latar halaman.
Pratinjau
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Alat Terkait
Lihat SemuaApa itu Generator Neumorphism?
Menghasilkan tampilan soft UI di mana elemen seolah menonjol dari (atau tertekan ke dalam) halaman. Alat ini menurunkan warna bayangan yang lebih terang dan lebih gelap dari warna dasar Anda dan menggabungkannya sebagai dua box-shadow yang berlawanan, dengan isian gradien opsional untuk permukaan cekung dan cembung.
Cara menggunakan Generator Neumorphism
- Masukkan Warna dasar (gunakan warna yang sama untuk latar halaman Anda).
- Pilih Bentuk: Datar, Cekung, Cembung, atau Ditekan.
- Pilih arah Sumber cahaya.
- Sesuaikan Jarak, Blur, Intensitas, Radius, dan Ukuran pratinjau.
- Salin kode CSS-nya.
Contoh
Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Kapan menggunakan Generator Neumorphism
Gunakan untuk dashboard yang playful, kontrol aplikasi rumah pintar atau musik, dan karya portofolio. Neumorphism pada dasarnya berkontras rendah, jadi jangan mengandalkannya saja untuk tombol atau kolom formulir penting; tambahkan label yang jelas, ikon, atau focus ring demi aksesibilitas.
Cara kerja Generator Neumorphism
Warna bayangan terang dan gelap dihitung dalam OKLCH dengan menaikkan dan menurunkan lightness warna dasar sebesar intensitas sambil mempertahankan hue dan chroma (dipetakan ke gamut sRGB), sehingga juga berfungsi untuk warna dasar berwarna maupun gelap. Bayangan gelap digeser menjauhi sumber cahaya sejauh jarak yang ditentukan dan bayangan terang ke arahnya, keduanya dengan blur yang sama. Ditekan memakai dua bayangan inset. Cekung dan cembung menambahkan linear-gradient yang sudutnya mengikuti arah cahaya, memakai warna sepertiga intensitas lebih terang dan lebih gelap.
Kasus Penggunaan Umum
- Tombol toggle dan tombol tekan yang lembut
- Kartu dashboard di atas latar yang serasi
- Status ditekan untuk kontrol aktif
- UI kalkulator atau pemutar musik
- Soft UI mode gelap dengan memakai warna dasar gelap
Pertanyaan Umum
Mengapa latar halaman harus sama dengan warna dasar?
Ilusinya muncul karena elemen berwarna sama dengan sekitarnya, dan hanya bayangan yang memperlihatkan bentuknya. Latar yang berbeda merusak efek tersebut.
Apakah bisa dipakai pada warna gelap?
Bisa. Karena lightness digeser dalam OKLCH alih-alih dikalikan, warna dasar gelap tetap mendapat bayangan sorotan yang terlihat lebih terang.
Apa bedanya cekung dan cembung?
Cembung lebih terang di sisi yang menghadap cahaya (terlihat menonjol); cekung lebih gelap di sisi itu (terlihat melengkung ke dalam).