Penjebak CSS Neumorfisme
Buat CSS soft-UI (neumorfik) — warna latar ditambah sepasang box-shadow offset, satu lebih terang dan satu lebih gelap, dalam gaya raised (flat/convex) atau pressed (concave) — dari warna dasar, jarak, blur, dan border radius.
Input
Warna dasar elemen dan sekitarnya.
Seberapa jauh bayangan terang dan gelap meluas dari elemen.
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-neumorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#e0e5ec",
"style": "flat",
"distance": "20",
"blur": "60",
"borderRadius": "50"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-neumorphism-generator` tool (CSS Neumorphism Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-neumorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Penjebak CSS Neumorfisme — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Yang dilakukannya
Penjebak CSS Neumorfisme mengubah pemilih warna dan tiga slider menjadi blok CSS "soft UI" yang siap ditempel. Neumorfisme (perpaduan "new" dan "skeuomorphism") adalah tren desain di mana elemen antarmuka tampak dicetak dari material yang sama dengan latar belakangnya — menonjol keluar dari permukaan, atau ditekan ke dalamnya — hanya menggunakan warna latar dan sepasang bayangan offset. Tidak ada trik gradien atau aset gambar di balik efeknya: ilusi datang seluruhnya dari penempatan satu bayangan yang lebih terang dari latar belakang (mensimulasikan sumber cahaya) berlawanan dengan yang lebih gelap (mensimulasikan bayangan yang dibuatnya).
Properti yang dihasilkannya
background: <color or gradient>;
border-radius: Npx;
box-shadow: Dpx Dpx Bpx <darker>, -Dpx -Dpx Bpx <lighter>;- background — warna dasar Anda sebagaimana adanya untuk gaya Flat, atau gradien diagonal lembut antara nuansa yang sedikit lebih terang dan sedikit lebih gelap untuk Convex (raised) dan Concave (pressed) — arah gradien terbalik di antara keduanya, yang membuat satu dibaca sebagai menonjol keluar dan yang lain sebagai terbenam.
- border-radius — sudut bulat dari slider Border Radius. Elemen neumorfik hampir selalu bulat; sudut tajam memecahkan ilusi "material bercetak".
- box-shadow — dua bayangan offset oleh slider Distance dalam arah berlawanan: nuansa lebih gelap menuju kanan bawah (seolah-olah diterangi dari kiri atas) dan nuansa lebih terang menuju kiri atas. Keduanya berbagi radius Blur yang sama, sehingga mereka memudar ke latar belakang di tepi daripada menunjukkan garis bayangan keras.
Nuansa lebih terang dan lebih gelap berasal dari warna dasar Anda dengan mendorong setiap saluran RGB menuju putih atau hitam dalam jumlah tetap — matematika lighten/darken yang sama dengan efek yang telah digunakan sejak popularisasi "Neumorphism in User Interfaces" asli 2019/2020.
Cara menggunakannya
- Pilih Warna Latar Belakang — ini adalah dasar setiap bayangan dan gradien dalam output yang berasal darinya, jadi efeknya bekerja paling baik pada warna mid-tone, low-saturation (palet neumorfik klasik adalah abu-abu lembut seperti
#e0e5ec; warna yang sangat gelap atau sangat jenuh mengurangi kontras yang dibutuhkan bayangan). - Pilih Gaya: Flat untuk panel warna solid dengan hanya pasangan bayangan raised, Convex untuk menambahkan gradien yang dibaca sebagai menonjol keluar, atau Concave untuk membalik gradien itu sehingga panel dibaca sebagai ditekan masuk.
- Seret Distance untuk mengatur seberapa jauh bayangan terang/gelap meluas dari elemen, dan Blur untuk mengontrol seberapa lembut tepinya — nilai blur yang lebih besar dengan jarak yang cocok memberikan tampilan "molded" yang paling mulus.
- Atur Border Radius untuk seberapa bulat sudut panel.
- Salin CSS yang dihasilkan dan terapkan ke elemen tingkat blok apa pun dengan latar belakang yang cocok (atau mendekati) warna yang Anda pilih — neumorfisme hanya dibaca dengan benar ketika sekitaran elemen berbagi warna dasarnya, karena bayangan dikalibrasi terhadapnya.
FAQ
Mengapa elemen saya terlihat rata alih-alih "soft UI"? Latar belakang induk/halaman harus cocok (atau hampir cocok) dengan warna yang Anda pilih di sini. Neumorfisme bergantung pada elemen yang menyatu dengan sekitarnya kecuali untuk dua bayangan halus — letakkan di halaman putih dengan warna dasar abu-abu dan ilusinya pecah.
Mengapa neumorfisme dianggap risiko aksesibilitas? Seluruh efek bergantung pada kontras yang sangat rendah antara elemen dan latar belakangnya, yang persis apa yang diingatkan oleh panduan aksesibilitas (seperti rasio kontras WCAG). Gunakan untuk permukaan dekoratif dan UI bertaruhan rendah, bukan untuk teks, tombol, atau apa pun yang harus dapat dibedakan pengguna sekilas.
Bisakah saya mendapatkan tampilan "pressed in" sejati dengan bayangan inset?
Gaya Concave penjebak ini mensimulasikan tampilan pressed dengan membalik gradien latar belakang daripada beralih ke bayangan inset CSS. Jika Anda memerlukan bayangan inset literal, tambahkan kata kunci inset ke setiap nilai box-shadow dalam CSS yang dihasilkan.
Apakah alat ini menyimpan atau mengunggah pilihan warna saya? Tidak. Semuanya berjalan secara lokal di browser Anda — apa pun yang Anda masukkan tidak dikirim ke server atau disimpan.