Generator Neumorfisme CSS

Apa itu Generator Neumorfisme CSS?

Generator Neumorfisme CSS adalah alat visual gratis untuk membuat tampilan soft-UI (neumorfisme), di mana elemen tampak menonjol dari permukaan atau tertekan ke dalamnya menggunakan dua bayangan tergeser dengan rona yang sama. Alat ini dibuat untuk desainer UI dan pengembang front-end yang menginginkan kedalaman halus dan terasa nyata itu tanpa menyetel pasangan box-shadow secara manual. Tetapkan warna dasar dengan pemilih atau kolom heksadesimal, ganti Bentuk antara Datar, Cekung, dan Cembung, lalu sesuaikan Jarak (seberapa jauh bayangan bergeser), Intensitas (seberapa kuat kontras terang/gelap), Blur (kelembutan), dan Radius (pembulatan sudut). Alat ini menurunkan sorotan yang lebih terang dan bayangan yang lebih gelap dari warna dasar Anda dan menggabungkannya – secara opsional melapisi gradien halus untuk bentuk cekung dan cembung – menjadi satu aturan CSS, ditampilkan langsung di atas latar yang serasi dan dikeluarkan sebagai kode yang dapat disalin.

Cara menggunakan Generator Neumorfisme CSS

1. Pilih warna dasar permukaan dengan contoh warna atau dengan mengetik nilai heksadesimal seperti #e0e5ec.
2. Pilih Bentuk: Datar untuk panel terangkat, Cekung untuk cekungan yang tertekan, atau Cembung untuk tonjolan berkubah.
3. Atur Jarak untuk menggeser bayangan terang dan gelap lebih ke luar demi ekstrusi yang lebih dalam.
4. Sesuaikan Intensitas agar kontras sorotan/bayangan lebih kuat atau lebih halus.
5. Atur Blur untuk tepi yang lebih lembut atau lebih tajam dan Radius untuk membulatkan sudut.
6. Periksa pratinjau langsung, lalu salin CSS neumorfisme yang dihasilkan ke stylesheet Anda.

Contoh

warna #e0e5ec, bentuk Datar, jarak 12, intensitas 15, blur 24, radius 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

warna #e0e5ec, bentuk Cekung, jarak 8, intensitas 15, blur 16, radius 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

warna #3a3f47, bentuk Cembung, jarak 6, intensitas 20, blur 12, radius 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Pertanyaan yang sering diajukan

Apa itu neumorfisme?

Neumorfisme (atau soft UI) adalah gaya di mana elemen tampak menonjol dari permukaan satu warna atau tertekan ke dalamnya, menggunakan dua box-shadow tergeser dengan rona yang sama – satu lebih terang di kiri atas dan satu lebih gelap di kanan bawah. Alat ini menurunkan kedua bayangan dari warna dasar Anda sehingga selalu serasi dengan permukaan.

Apa perbedaan antara Datar, Cekung, dan Cembung?

Datar mempertahankan permukaan dalam satu warna solid sehingga elemen tampak terangkat di atas latar. Cekung menambahkan gradien halus yang menggelap ke arah kiri atas, membuatnya tampak terkeruk ke dalam. Cembung membalik gradien sehingga bagian tengah tampak berkubah dan terangkat. Bayangan terang dan gelap tetap sama; hanya isian permukaan yang berubah.

Bagaimana Jarak, Intensitas, Blur, dan Radius bekerja?

Jarak adalah pergeseran piksel kedua bayangan – nilai lebih besar mendorong elemen lebih jauh dari permukaan. Intensitas mengatur seberapa lebih terang dan lebih gelap kedua warna bayangan dibanding warna dasar. Blur melembutkan tepi bayangan, dan Radius membulatkan sudut. CSS diperbarui secara langsung saat Anda mengubah salah satunya.

Warna apa yang harus saya pakai untuk latar?

Neumorfisme hanya tampil dengan benar bila elemen berada di atas permukaan dengan warna dasar yang sama – terapkan warna yang sama pada elemen induk atau latar halaman. Pratinjau menggunakan warna dasar Anda sebagai latar sehingga Anda dapat menilai efeknya secara akurat sebelum menyalin.

Apakah data saya diunggah ke suatu tempat?

Tidak. Generator berjalan sepenuhnya di browser Anda dengan JavaScript – warna dan pengaturan Anda tidak pernah dikirim ke server, jadi alat ini bekerja secara privat dan bahkan offline setelah halaman dimuat.