MoreOnlineTools
ESC

Penjana CSS Box Shadow

Reka bayang dengan pelbagai lapisan dan dapatkan kod CSS sedia guna

Kawalan Bayang

Pratonton Langsung

Output CSS

Semua pemprosesan berlaku dalam pelayar anda. Tiada data dihantar ke mana-mana pelayan.

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?

1

Konfigurasikan Bayang

Laraskan ofset X/Y, kabur, sebaran dan warna untuk setiap lapisan bayang. Togol inset untuk bayang dalaman.

2

Tambah Lebih Lapisan

Klik Tambah Lapisan untuk mencipta lapisan bayang tambahan untuk kesan yang lebih kompleks.

3

Salin CSS

Klik butang Salin CSS untuk menyalin kod box-shadow yang dijana ke papan keratan anda.

Soalan Lazim

Ofset X menggerakkan bayang ke kiri (negatif) atau kanan (positif). Ofset Y menggerakkannya ke atas (negatif) atau bawah (positif). Kabur mengawal kelembutan — 0 ialah tepi tajam, nilai lebih tinggi menghasilkan tepi lebih lembut. Sebaran mengembangkan (positif) atau mengecilkan (negatif) saiz bayang sebelum pengkabutan. Sebaran negatif dengan kabur yang besar menghasilkan bayang yang lebih padat dan realistik.

Sebanyak yang anda perlukan. CSS box-shadow menerima senarai nilai bayang yang dipisahkan dengan koma. Pelbagai lapisan membolehkan anda menggabungkan bayang gelap yang padat untuk kedalaman dengan bayang lebih lebar dan cerah untuk cahaya ambien. Setiap lapisan mempunyai tetapan ofset, kabur, sebaran, warna dan inset yang bebas.

Inset membalikkan bayang untuk dirender di dalam elemen dan bukannya di luar. Tanpa inset, bayang memberikan rupa yang terangkat atau terapung. Dengan inset, bayang memberikan rupa yang ditekan, cekung atau neumorfik. Berguna untuk medan input yang kelihatan tenggelam atau butang yang kelihatan ditekan semasa aktif.

Warna pepejal seperti #000000 kelihatan keras pada mana-mana latar belakang selain putih. Warna separa telus seperti rgba(0, 0, 0, 0.15) bergabung secara semula jadi dengan apa sahaja yang ada di belakangnya. Kebanyakan bayang UI menggunakan hitam dengan kelegapan 10-25%.

Halus: bayang yang hampir tidak kelihatan untuk kad. Sederhana: bayang ketinggian kad piawai. Kuat: bayang lebih dalam untuk modal atau hamparan. Terapung: bayang berofset tinggi yang menjadikan elemen kelihatan terapung. Dalaman: bayang dalam untuk butang dalam keadaan ditekan. Berlapis: dua bayang gabungan untuk kesan berbilang kedalaman yang realistik.

Neumorfisme menggunakan dua bayang: satu sedikit lebih cerah daripada latar belakang dan satu lagi sedikit lebih gelap. Contoh: "box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff" pada latar belakang kelabu cerah. Aktifkan dua lapisan, tetapkan arah X/Y yang bertentangan dan gunakan varian cerah/gelap warna latar belakang anda.

Tidak. Tidak seperti outline atau border, box-shadow tidak mempengaruhi dimensi elemen atau aliran susun atur. Bayang dirender di luar (atau di dalam dengan inset) model kotak tanpa menolak elemen lain. Nilai sebaran juga tidak menambah lebar atau tinggi elemen yang dikira.

Tidak. Semua penjanaan CSS berjalan secara tempatan dalam pelayar anda. Tiada apa yang dimuat naik atau disimpan.

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.

Keselamatan dan Privasi

Keselamatan data anda adalah keutamaan kami

Pemprosesan Tempatan

Semua pemprosesan berlaku dalam pelayar anda

Tiada Pemindahan Data

Data anda tidak dihantar ke pelayan kami

Tiada Penyimpanan Data

Tiada data disimpan atau dikongsi

Penyulitan SSL

Penyulitan SSL untuk sambungan selamat

Langkah Seterusnya

Penjana Border Radius

Jana CSS border-radius dengan pratonton visual dan kod sedia guna

Penjana Gradien CSS

Jana gradien CSS dengan pratonton langsung dan pelbagai hentian warna

Alat Berkaitan

Penjana Kod QR

Cipta kod QR profesional dengan logo dan warna tersuai

Pemformat YAML

Cantikkan dan sahkan kod YAML

Pengekod/Penyahkod URL

Enkod dan dekod URL dan komponen URI

Penyahkod JWT

Dekod dan analisis token JWT

Pemampat & Pencantik CSS/JS

Mampatkan dan cantikkan kod CSS dan JavaScript dalam talian

Penguji Regex

Uji dan nyahpepijat ungkapan nalar dengan padanan dan sorotan masa nyata

Lebih Banyak di MoreOnlineTools

Alat Dalam Talian Percuma

109 alat untuk teks, imej, keselamatan dan pembangunan

Semak Semua Alat →
Helaian Rujukan Pembangun

Rujukan pantas untuk Regex, Git, kod HTTP, CSS, Markdown dan lagi

Semak Helaian Rujukan →
Kalkulator Dalam Talian

BMI, pinjaman, peratusan, tip, umur dan kalkulator praktikal lain

Semak Kalkulator →
Koleksi Alat

Aliran kerja terpilih: pembangunan API, saluran imej, audit keselamatan dan lagi

Semak Koleksi →