Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Neumorphism CSS

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Gaya Prasetel

Telah ditetapkan sebelumnya

Warna Dasar

Latar belakang

Warna latar belakang dari elemen dan lingkungannya

Bentuk

Tipe Bentuk

Ukuran Elemen (px): 200

Radius Bingkai (px): 50

Bayangan

Jarak (px): 20 Seberapa jauh bayangan menyebar dari elemen

Intensitas (1-7): 15 Kontras antara bayangan terang dan gelap

Buram (px): 60

Sudut Cahaya: 145 Arah sumber cahaya (dalam derajat)

KELUARAN

Sisi klien

Pratinjau Langsung

CSS yang Dihasilkan

IKLAN · HAPUS?

Memandu

Generator Neumorphism CSS

Buat elemen UI yang lembut dan dikeluarkan tanpa harus menyesuaikan dua bayangan kotak secara manual. Pilih warna dasar, pilih bentuk (datar, cekung, cembung, atau ditekan), geser slider untuk jarak, intensitas, blur, dan sudut cahaya, lalu salin kode CSS yang dihasilkan langsung ke proyek Anda.

Cara Penggunaan

Pilih warna latar belakang. Warna yang sama digunakan untuk elemen dan area sekitarnya — itulah yang membuat efek neumorfisme bekerja.
Pilih bentuk: Datar, Cekung (penurunan ringan), Cembung (peningkatan ringan), atau Inset (ditekan ke dalam).
Atur Jarak dan Sudut Cahaya untuk menentukan arah bayangan.
Atur Intensitas dan Blur hingga permukaannya terasa tepat.
Salin kode CSS, atau toggle Tampilkan HTML + CSS untuk snippet yang siap disalin.

Fitur

Pratinjau langsung — setiap perubahan pada slider akan memperbarui elemen yang ditampilkan secara langsung.
Lima preset bawaan — Cahaya Lembut, Cahaya Kuat, Gelap Lembut, Gelap Kuat, dan Ditekan.
Warna bayangan yang dihasilkan secara otomatis — bayangan terang dan gelap diperkuat/dimudahkan secara matematis dari warna dasar Anda sehingga efeknya selalu sesuai.
Gradien cekung dan cembung — alat ini menghasilkan gradien linear yang sesuai untuk permukaan elemen dalam mode tersebut.
Mode Ditetapkan (ditekan) — untuk tombol yang terlihat "ditekan" saat diklik.
Kontrol sudut cahaya — putar sumber cahaya virtual dari 0° hingga 360°.
Kode CSS siap disalin — output bersih yang mencakup pernyataan box-shadow dan latar belakang permukaan.

 Tanya Jawab Umum

Apa itu neumorfisme?

Neumorfisme (juga disebut antarmuka lembut) adalah gaya visual di mana elemen terlihat menonjol dari atau menyusun ke latar belakang. Ini dicapai dengan dua bayangan kotak dengan blur yang sama — satu bayangan terang di sisi yang menghadap cahaya dan satu bayangan gelap di sisi berlawanan — keduanya ditampilkan di latar belakang yang berwarna sama dengan elemen itu sendiri.
Mengapa elemen harus berbagi warna latar belakang?

Neumorfisme bergantung pada ilusi bahwa bentuk merupakan bagian dari permukaan yang sama dengan latar belakang. Jika elemen menggunakan warna yang berbeda, maka tidak akan terasa seperti ekstrusi, melainkan terlihat seperti elemen datar dengan dua bayangan acak, yang menghancurkan efek tersebut.
Apakah antarmuka neumorfisme dapat diakses?

Mereka memiliki kekurangan aksesibilitas yang terkenal. Karena semua elemen berbagi warna latar belakang, kontras terhadap teks dan elemen UI lainnya sering sangat rendah, yang dapat gagal memenuhi persyaratan kontras WCAG dan membingungkan pengguna perbesaran layar. Gunakan neumorfisme untuk permukaan hias dan tetap gunakan elemen interaktif penting dengan kontras tinggi.
Bagaimana hubungan sudut cahaya dengan pergeseran bayangan?

Dua pergeseran bayangan dihasilkan dari sudut cahaya menggunakan trigonometri dasar: offsetX = cos(angle) × distance, offsetY = sin(angle) × distance. Bayangan yang berlawanan ditempatkan pada pergeseran yang dinyatakan negatif sehingga sisi cahaya dan gelap selalu berada di ujung berlawanan, sesuai dengan bagaimana sumber cahaya nyata akan memantulkan bayangan tersebut.