Penjana CSS Box Shadow
Reka bayang dengan pelbagai lapisan dan dapatkan kod CSS sedia guna
Kawalan Bayang
Pratonton Langsung
Output CSS
Contoh Penggunaan
Bayang Kad Halus
Bayang ringan dan halus yang sempurna untuk kad dan bekas kandungan.
Bayang Pelbagai Lapisan
Gabungkan pelbagai lapisan bayang untuk kesan kedalaman yang kaya dan berlapis.
Bayang Dalaman
Cipta bayang dalaman untuk kesan elemen yang ditekan atau cekung.
Ciri-ciri
Pelbagai Lapisan Bayang
Tambah dan konfigurasikan pelbagai lapisan bayang untuk mencipta kesan bayang yang kompleks dan realistik
Pratonton Visual Langsung
Lihat kesan bayang dikemas kini secara masa nyata semasa anda melaraskan ofset, kabur, sebaran dan warna
Pemilih Warna dan Pratetap
Pilih warna tersuai dengan pemilih natif dan gunakan bayang pratetap untuk reka bentuk pantas
Privasi Diutamakan
Semuanya berjalan dalam pelayar anda — tiada data dihantar ke mana-mana pelayan
Cara Menggunakan?
Konfigurasikan Bayang
Laraskan ofset X/Y, kabur, sebaran dan warna untuk setiap lapisan bayang. Togol inset untuk bayang dalaman.
Tambah Lebih Lapisan
Klik Tambah Lapisan untuk mencipta lapisan bayang tambahan untuk kesan yang lebih kompleks.
Salin CSS
Klik butang Salin CSS untuk menyalin kod box-shadow yang dijana ke papan keratan anda.
Soalan Lazim
Apakah penjana box shadow?
Penjana box shadow ialah alat visual yang membolehkan anda mereka bentuk kesan CSS box-shadow tanpa menulis kod secara manual. Anda melaraskan peluncur untuk ofset X/Y, kabur, sebaran dan warna, dan CSS dikemas kini secara langsung. Eksperimen sehingga nampak sempurna, kemudian salin kodnya.
Ciri-ciri utama
Penjana ini menyokong pelbagai lapisan bayang supaya anda boleh menggabungkan bayang lembut dan keras untuk kedalaman. Setiap lapisan ada pemilih warna dan togol inset tersendiri. Pratetap untuk gaya biasa seperti kad halus, elemen terapung dan kesan kedalaman berlapis turut disediakan.
Kes penggunaan biasa
Komponen kad dan modal sering memerlukan angkatan halus. Butang mendapat manfaat daripada bayang ringan semasa hover. Bayang inset sesuai untuk medan input atau butang dalam keadaan ditekan. Bayang berbilang lapisan memberikan bahagian hero rupa premium.
Petua untuk bayang yang lebih baik
Kekalkan nilai kabur lebih tinggi daripada sebaran untuk rupa semula jadi. Gunakan hitam separa telus (seperti rgba(0,0,0,0.1)) dan bukannya warna pepejal. Lapiskan dua atau tiga bayang dengan ofset berbeza untuk pencahayaan realistik.
Privasi
Semuanya berjalan dalam pelayar anda. Tiada data bayang, tiada tetapan, tiada apa-apa yang meninggalkan mesin anda.