Generator Neumorphism
Rancang permukaan UI neumorfik yang lembut dan menonjol dengan bayangan ganda lalu salin CSS-nya.
—
Latar belakang kanvas mengikuti warna elemen — itulah yang membuat tampilan neumorfik yang lembut dan menonjol berfungsi.
Secara baku, bayangan terang dan gelap diturunkan dari warna dasar. Aktifkan untuk mengaturnya sendiri.
Tentang Generator Neumorphism
Neumorphism Generator merancang tampilan "soft UI" yang lembut dan seolah terangkat: sebuah elemen yang tampak menonjol keluar dari — atau tertekan masuk ke — permukaan di belakangnya. Pilih satu warna dasar dan alat ini akan menurunkan semua yang lain, karena efek ini hanya berfungsi bila elemen dan latar belakangnya berbagi warna yang sama, sedangkan kedalamannya sepenuhnya berasal dari dua box-shadow yang saling berlawanan.
Slider mengontrol geometrinya: ukuran, border radius, jarak bayangan, intensitas dan blur-nya. Empat mode bentuk — flat, concave, convex dan pressed — mengganti gradien internal dan arah bayangan, sementara pemilih sumber cahaya memindahkan highlight ke salah satu dari empat sudut agar elemen sesuai dengan pencahayaan desain Anda.
Secara default warna bayangan terang dan gelap dihitung dari warna dasar, tetapi mode manual memungkinkan Anda mengatur keduanya sendiri. CSS yang dihasilkan — background, radius dan dual box-shadow — tinggal satu klik lagi.
Cara menggunakan Generator Neumorphism
- Pilih warna dasar — warna ini diterapkan pada elemen sekaligus kanvas di belakangnya.
- Pilih sebuah bentuk: flat, concave, convex atau pressed.
- Atur sudut sumber cahaya untuk mengontrol arah jatuhnya highlight.
- Sesuaikan ukuran, border radius, jarak, intensitas dan blur dengan slider.
- Aktifkan warna bayangan manual jika Anda ingin mengganti nada terang dan gelap yang diturunkan otomatis.
- Salin CSS-nya dan tempelkan ke elemen Anda.