Sisipkan Bayangan Kotak CSS — Kode Siap Pakai
Buat kode bayangan kotak CSS secara visual: penggeser untuk offset, blur, spread, warna dengan opacity, mode inset dan hingga empat lapisan dengan pratinjau langsung.
Hasil
Halaman ini membuka generator box-shadow dengan kotak centang inset sudah dicentang, sehingga bayangan digambar di dalam elemen, bukan di belakangnya. Kartu pratinjau menampilkan efek cekung sekaligus, dan setiap penggeser terus memperbarui baris CSS secara langsung.
Bayangan inset adalah bagaimana kedalaman pemalsuan CSS masuk ke dalam: status tombol yang ditekan, bidang pencarian dan lubang masukan, palung bilah kemajuan, dan panel terukir semuanya bergantung pada bayangan tersebut. Karena bayangan menempel pada tepi bagian dalam, keburaman dan penyebaran berperilaku sedikit berbeda dibandingkan bayangan biasa — penggeser di sini memungkinkan Anda merasakan perbedaannya dengan segera.
Ketika tampilan cekung sudah tepat, salin garis bayangan kotak ke dalam stylesheet Anda. Anda juga dapat menggabungkan lapisan inset dengan lapisan luar biasa — tambahkan lapisan kedua dan hapus centang inset untuk menggabungkan keduanya dalam satu deklarasi.