Generator Neumorphism CSS untuk Bayangan Soft UI
Generator neumorphism CSS ini membangun efek bayangan soft UI secara visual, jadi Anda tidak perlu lagi menulis dua box-shadow secara manual. Pilih warna dasar, tentukan bentuk, geser beberapa slider, lalu salin CSS yang siap pakai. Alat ini dibuat untuk desainer dan developer front-end yang ingin kartu, tombol, dan input neumorphic tanpa coba-coba menulis kode.
Neumorphism (juga disebut Soft UI) memadukan dua bayangan — satu terang dan satu gelap — agar sebuah elemen tampak menonjol keluar dari atau tertekan masuk ke permukaan yang sama. Generator ini menurunkan warna bayangan yang serasi itu dari warna dasar Anda secara otomatis, lalu menampilkan pratinjau langsung dan CSS yang persis saat Anda menyesuaikannya.
Cara Menggunakan Generator Neumorphism
Pilih warna dasar
Atur latar Anda dengan pemilih warna atau ketik nilai hex. Nada terang dan netral seperti abu-abu bekerja paling baik, karena menyisakan ruang yang cukup untuk bayangan terang sekaligus gelap.
Pilih tipe bentuk
Beralih antara Flat, Pressed, Concave, dan Convex. Gunakan Flat untuk kartu menonjol dan Pressed untuk status aktif atau saat diklik.
Sesuaikan bayangan
Atur Jarak (0–50px), Blur (0–100px), Intensitas (0–100%), Border Radius (0–100px), dan Ukuran pratinjau (80–400px). Setiap slider punya input angka pasangan untuk nilai yang presisi.
Tentukan arah cahaya
Pilih dari mana cahaya virtual datang — Kiri Atas, Kanan Atas, Kiri Bawah, atau Kanan Bawah. Ini menentukan sisi mana yang mendapat bayangan terang dan mana yang gelap. Kiri Atas adalah yang paling alami.
Salin CSS-nya
Klik Salin CSS dan tempel output-nya ke stylesheet Anda. Ingat untuk memberi kontainer induk warna dasar yang sama agar ilusi neumorphic tetap terjaga.
Fitur
Warna Dasar dengan Bayangan Otomatis
Pilih warna dasar dengan pemilih warna atau input hex, dan warna bayangan terang serta gelap diturunkan secara otomatis untuk hasil yang alami dan harmonis.
Empat Tipe Bentuk
Buat efek Flat (menonjol), Pressed (inset), Concave (gradien ke dalam), dan Convex (gradien ke luar), serta beralih seketika untuk membandingkannya.
Kontrol Bayangan Presisi
Setel jarak, blur, dan intensitas dengan slider yang masing-masing punya input angka tersinkron untuk nilai yang presisi.
Kontrol Radius & Ukuran
Atur kelengkungan sudut hingga 100px dan ubah ukuran elemen pratinjau dari 80 sampai 400px untuk melihat efeknya pada skala yang Anda butuhkan.
Kontrol Arah Cahaya
Pilih dari empat arah sumber cahaya; offset bayangan dan sudut gradien menyesuaikan secara otomatis untuk mencocokkannya.
Pratinjau Beragam Elemen
Pratinjau efek pada Kartu, Tombol, Lingkaran, atau Input untuk melihat tampilannya dalam beragam konteks UI.
Pratinjau Latar Gelap
Aktifkan Pratinjau Gelap untuk memeriksa desain pada permukaan yang lebih gelap; visualnya dihitung ulang sementara CSS yang diekspor tetap memakai warna asli Anda.
Enam Preset Mulai Cepat
Mulai dari Halus, Sedang, Kuat, Pressed, Concave, atau Convex, lalu perhalus dengan slider.
CSS Langsung & Salin Sekali Klik
CSS background dan box-shadow yang dihasilkan diperbarui secara real-time, siap disalin dengan satu klik.
Pertanyaan yang Sering Diajukan
Apa itu neumorphism (Soft UI)?
Neumorphism, atau Soft UI, adalah gaya desain yang memadukan permukaan datar dengan dua bayangan halus sehingga elemen tampak menonjol keluar dari atau tertekan masuk ke latar yang sama. Gaya ini memakai satu bayangan terang dan satu gelap untuk meniru kedalaman yang lembut dan realistis.
Mengapa generator memakai dua box-shadow (terang + gelap)?
Satu bayangan saja hanya menggelapkan satu sisi. Neumorphism membutuhkan bayangan terang di sisi yang menghadap sumber cahaya dan bayangan gelap di sisi berlawanan, agar elemen tampak terangkat dari permukaan. Generator ini menghasilkan kedua bayangan dalam satu deklarasi box-shadow untuk Anda.
Mengapa efek neumorphism saya tidak terlihat benar?
Penyebab paling umum adalah ketidakcocokan antara elemen dan latar induknya. Neumorphism mengharuskan keduanya memiliki warna yang sama, jadi terapkan warna latar yang dihasilkan ke elemen dan kontainer induknya.
Warna apa yang paling cocok untuk neumorphism?
Warna netral dengan nada sedang bekerja paling baik — abu-abu terang seperti #e0e0e0 atau pastel lembut. Warna yang sangat gelap atau sangat terang mengecilkan kontras antara bayangan terang dan gelap sehingga efeknya sulit terlihat, jadi hindari putih murni dan hitam murni.
Bagaimana cara membuat efek neumorphic ditekan (inset)?
Pilih tipe bentuk Pressed. Tipe ini mengubah box-shadow menjadi inset, sehingga elemen tampak terdorong masuk ke permukaan — sempurna untuk status aktif, fokus, atau saat diklik. Preset Pressed memberi Anda titik awal yang siap pakai.
Apa perbedaan antara Concave dan Convex?
Concave menambahkan gradien yang bergerak dari gelap ke terang untuk ilusi lengkungan ke dalam, sedangkan Convex bergerak dari terang ke gelap untuk ilusi lengkungan ke luar. Keduanya tetap mempertahankan dua bayangan menonjol yang sama seperti Flat.
Apakah Pratinjau Gelap mengubah output CSS?
Tidak. Pratinjau Gelap hanya untuk visualisasi — CSS yang dihasilkan selalu mencerminkan warna dasar asli Anda. Untuk membuat CSS bertema gelap, ubah warna dasarnya sendiri menjadi nada gelap.
Apa beda neumorphism dengan glassmorphism dan skeuomorphism?
Neumorphism memakai dua bayangan serasi pada satu permukaan datar untuk kedalaman yang lembut. Glassmorphism mengandalkan blur latar dan transparansi untuk tampilan kaca buram, sedangkan skeuomorphism meniru tekstur dan material dunia nyata. Neumorphism adalah jalan tengah yang minimal dan monokrom.
Apakah neumorphism ramah aksesibilitas?
Neumorphism secara alami memiliki kontras rendah, jadi gunakan terutama untuk kontainer dekoratif ketimbang kontrol interaktif yang krusial. Jaga teks pada permukaan neumorphic dengan rasio kontras yang memadai, dan perkuat tombol serta input dengan label yang jelas, gaya fokus, dan border.
Bisakah saya pakai CSS-nya dengan framework apa pun?
Bisa. Output-nya memakai properti background, box-shadow, dan border-radius standar yang bekerja dengan Tailwind, Bootstrap, atau CSS biasa — cukup terapkan ke elemen Anda.
Belum ada komentar. Jadilah yang pertama berkomentar!