Reka permukaan UI neumorfik yang lembut dan tertonjol dengan dua bayang dan salin CSS.

Pratonton
CSS

Latar belakang kanvas sepadan dengan warna elemen — itulah yang membuatkan rupa neumorfik yang lembut dan tertonjol berfungsi.

Warna asas
Digunakan untuk kedua-dua elemen dan latar belakangnya.
Bentuk
Sumber cahaya
200px
50px
20px
15%
60px

Secara lalai, bayang cerah dan gelap diperoleh daripada warna asas. Dayakan untuk menetapkannya sendiri.


Mengenai Penjana Neumorphism

Neumorphism Generator mereka bentuk gaya "soft UI" yang lembut dan timbul: elemen yang kelihatan seperti ditekan keluar — atau ke dalam — permukaan di belakangnya. Pilih satu warna asas dan alat ini menerbitkan segala-galanya kerana kesan ini hanya berfungsi apabila elemen dan latar belakangnya berkongsi warna yang sama, dan kedalaman datang sepenuhnya daripada dua box-shadow yang berlawanan arah.

Peluncur mengawal geometri: saiz, jejari sudut, jarak bayang, keamatan dan kekaburannya. Empat mod bentuk — flat, concave, convex dan pressed — menukar kecerunan dalaman serta arah bayang, dan pemilih sumber cahaya menggerakkan sorotan ke mana-mana daripada empat penjuru supaya elemen sepadan dengan pencahayaan reka bentuk anda.

Secara lalai, warna bayang terang dan gelap dikira daripada warna asas, tetapi mod manual membolehkan anda menetapkan kedua-duanya sendiri. CSS yang dijana — background, radius dan box-shadow berganda — hanya sejauh satu klik.

Cara menggunakan Penjana Neumorphism

  1. Pilih warna asas — ia digunakan pada elemen dan kanvas di belakangnya.
  2. Pilih bentuk: flat, concave, convex atau pressed.
  3. Tetapkan penjuru sumber cahaya untuk mengawal di mana sorotan jatuh.
  4. Laraskan saiz, jejari sudut, jarak, keamatan dan kekaburan dengan peluncur.
  5. Aktifkan warna bayang manual jika anda mahu menggantikan nada terang dan gelap yang diterbitkan.
  6. Salin CSS dan tampalkannya pada elemen anda.

Soalan lazim

Neumorphism bergantung pada elemen berkongsi warna latar belakang dengan permukaan di belakangnya. Letakkan elemen pada bekas dengan warna asas yang sama — pada latar putih atau kontras, bayang berganda kelihatan seperti cahaya, bukan kedalaman.

Flat mengekalkan permukaan rata; convex menambah kecerunan yang membuatnya menonjol keluar; concave membuatnya cengkung ke dalam; pressed membalikkan bayang sepenuhnya supaya elemen kelihatan tenggelam ke dalam permukaan — keadaan butang aktif yang klasik.

Dua box-shadow pada penjuru bertentangan: satu gelap meniru bayang dan satu terang meniru sorotan, kedua-duanya diterbitkan daripada warna asas. Jarak mengalihkannya, kekaburan melembutkannya, keamatan mengawal sejauh mana ia menyimpang daripada warna asas.

Gunakan dengan berhati-hati. Gaya ini secara semula jadi berkontras rendah, jadi gandingkannya dengan teks yang jelas dibaca, keadaan fokus yang kukuh dan nisbah kontras yang mencukupi untuk elemen interaktif — simpan gaya lembut ini untuk permukaan hiasan jika boleh.

Ya, ia percuma dan berjalan sepenuhnya di pelayar anda. Laras, pratonton dan salin CSS seberapa kerap yang anda mahu tanpa akaun.


Carian popular
penjana css neumorphism penjana bayang soft ui css box shadow neumorfik penjana box shadow neumorphism penjana bayang lembut css alat reka bentuk neumorphism penjana bayang inset css box shadow dua css
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.