Bayangan kotak menambah kedalaman elemen UI dengan menyimulasikan pencahayaan dan ketinggian. Bayangan yang dirancang dengan baik menciptakan hierarki visual dan membuat antarmuka terasa lebih mudah disentuh.
Sesuaikan offset horizontal, offset vertikal, blur, penyebaran, warna, dan opacity. Pratinjau Canvas diperbarui secara real-time. Salin kode CSS jika sudah puas.
Frequently Asked Questions
Q: Apa perbedaan antara buram dan menyebar?
Apa perbedaan antara buram dan menyebar? Blur mengontrol seberapa lembut tepi bayangan. Spread mengontrol seberapa besar bayangan meluas.
Q: Berapa banyak lapisan bayangan yang harus saya gunakan?
Berapa banyak lapisan bayangan yang harus saya gunakan? 1-2 lapis biasanya cukup. Gunakan bayangan sisipan untuk kedalaman bagian dalam.
Q: Berapa banyak lapisan bayangan kotak yang harus saya gunakan?
Berapa banyak lapisan bayangan kotak yang harus saya gunakan? Desain profesional sering kali menggunakan 2-4 lapisan untuk kedalaman. Mulailah dengan bayangan kecil yang rapat, tambahkan bayangan sebaran sedang, dan secara opsional tambahkan bayangan sekitar yang besar. Alat ini mendukung lapisan tanpa batas.
Q: Apa dampak kinerja box-shadow?
Apa dampak kinerja box-shadow? Beberapa bayangan kotak mempunyai dampak yang dapat diabaikan. Terlalu banyak bayangan buram dapat memengaruhi kinerja gulir pada perangkat kelas bawah. Alat ini menampilkan pratinjau waktu nyata sehingga Anda dapat menilai sebelum menyalin.
Q: Bisakah saya membuat bayangan bagian dalam (inset)?
Bisakah saya membuat bayangan bagian dalam (inset)? Versi saat ini berfokus pada bayangan luar. Untuk bayangan bagian dalam, tambahkan kata kunci "inset" secara manual ke awal nilai bayangan kotak CSS yang dihasilkan.