CSS Box Shadow Generator (Multi-Layer & Inset)
Reka bentuk licin, pelbagai lapisan CSS kotak bayangan dengan hidup blur, menyebarkan, masukkan toggle, dan satu klik Tailwind / CSS eksport kod.
Berjalan dalam pelayar anda. Fail anda tidak pernah meninggalkan peranti. Lihat cara menyemaknya
…
Cara melakukannya
- 1Langkah 1: buka CSS Box Shadow Generator (Multi-Layer & Inset) dan masukkan data anda
Taip nombor atau teks anda, tambah fail, atau pilih pilihan yang diperlukan. Tiada apa-apa dimuat naik: semuanya kekal dalam pelayar anda.
- 2Langkah 2: apa yang dilakukan CSS Box Shadow Generator (Multi-Layer & Inset)
Reka bentuk licin, pelbagai lapisan CSS kotak bayangan dengan hidup blur, menyebarkan, masukkan toggle, dan satu klik Tailwind / CSS eksport kod.
- 3Langkah 3: baca keputusan dan bandingkan
Keputusan muncul serta-merta. Ubah satu nilai untuk melihat bagaimana jawapan berubah, kemudian simpan angka yang sesuai dengan kes anda.
- 4Langkah 4: salin atau simpan
Salin keputusan atau muat turun. Untuk keputusan penting, sahkan dengan sumber rasmi atau penasihat.
Tentang alat ini
Tambah kedalaman dan ketinggian sentuhan ke kad dan elemen UI. Sesuaikan offset mendatar / menegak, jari-jari kabur, jarak penyebaran, dan warna bayangan dengan slaider kekeruhan. Uji terhadap latar belakang terang dan gelap, beralih bayang-bayang masuk untuk keadaan butang yang ditekan, dan salin kelas CSS atau Tailwind standard serta-merta.
Petua untuk hasil terbaik
Sebelum bermula, luangkan seketika untuk membaca pilihan dan cuba alat dengan contoh kecil dahulu. Semuanya berjalan dalam pelayar pada peranti anda sendiri; tiada apa yang anda taip atau tambah dimuat naik dan menutup tab memadam semuanya. Jika sesuatu tidak kelihatan betul, muat semula halaman dan cuba lagi atau gunakan pautan laporan pada halaman ini untuk memberitahu kami apa yang tidak kena. Jika hasil masih kelihatan salah, ubah satu nilai pada satu masa untuk melihat ruang mana yang paling berpengaruh. Tanda halaman ini jika anda akan menggunakannya semula.
Ringkasnya
- Kategori: Imej
- Berjalan dalam pelayar, tanpa pendaftaran, tanpa muat naik.
- Maklumat yang anda masukkan kekal pada peranti anda.
- Tersedia dalam banyak bahasa.
- Kandungan disemak kali terakhir:
Soalan lazim
Bagaimana saya membuat bayangan drop yang lembut dan moden?
Gunakan radius kabur yang lebih besar (20px-40px), penyebaran negatif (-4px), dan ketidaksempurnaan rendah (10%-25%) pada warna slate gelap untuk bayangan ultra-lembut.
Adakah sokongan ini meletakkan bayang-bayang dalaman?
Memungkinkan 'Inset Shadow' beralih untuk menjana kesan bayangan dalaman yang sesuai untuk medan input, telaga, dan keadaan butang ditekan.
Boleh saya uji bagaimana bayangan kelihatan pada kad mod gelap?
Klik 'Dark Canvas' untuk menguji kontras bayangan pada latar belakang gelap dan papan hitam.
Adakah CSS yang dihasilkan serasi dengan semua pelayar?
Ya, ia menghasilkan sintaks kotak-bayangan yang standard dan sesuai dengan W3C.