Desain bayangan kotak secara visual — sesuaikan offset, blur, spread, warna dan opasitas, dan salin CSS-nya.
Properti box-shadow memberikan kedalaman pada elemen datar. Ia menerima lima nilai: offset horizontal, offset vertikal, radius blur, radius spread, dan warna. Bayangan halus dengan blur besar dan offset kecil terbaca sebagai elevasi; bayangan ketat dengan offset kuat terbaca sebagai tepi keras. Desainer menyetel angka-angka ini berdasarkan perasaan, yang berarti menggeser slider dan melihat hasilnya — persis seperti yang dilakukan alat ini.
Kotak pratinjau di tengah menampilkan bayangan saat Anda menggerakkan slider. Baris CSS di bawahnya diperbarui secara real time: salin dan tempelkan ke stylesheet Anda. Alat ini juga mendukung bayangan inset, yang melukis di dalam elemen alih-alih di luar — berguna untuk tombol yang ditekan, kolom input, dan panel yang terbenam.
Semuanya berjalan di browser Anda. Pratinjau adalah box-shadow CSS nyata yang diterapkan pada div, bukan rendering atau perkiraan. Apa yang Anda lihat di sini adalah apa yang akan dilihat pengguna Anda.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
Ia memperluas atau menyusutkan bayangan sebelum di-blur. Spread positif membuat bayangan lebih besar dari elemen; spread negatif membuatnya lebih kecil. Nol berarti bayangan berukuran sama dengan elemen.
Ya, di CSS. Alat ini menghasilkan satu bayangan. Untuk menambah lebih banyak, pisahkan dengan koma di stylesheet Anda.
Ia melukis bayangan di dalam elemen alih-alih di luar. Berguna untuk tombol keadaan ditekan atau panel terbenam.
Ya. Bayangan mengikuti border-radius elemen secara otomatis.
Karena slider opasitas membutuhkan channel alpha. Warna hex bersifat opaque; rgba memungkinkan bayangan menjadi semi-transparan, yang terlihat lebih alami.
Vai.la mengubah URL apa pun menjadi tautan pendek dengan statistik klik, QR Code, dan biolink Anda sendiri.
Vai.la tidak bertanggung jawab atas cara alat-alat ini digunakan maupun atas keputusan yang diambil berdasarkan hasilnya.