onul.works

Penjana Box Shadow

Cipta nilai CSS box-shadow dengan penjana box shadow visual secara langsung.

⌘ Berjalan dalam pelayar ◴ Data tidak disimpan ⌁ Percuma

Penerangan konsep

CSS box-shadow terus guna untuk kad, butang, dan modal

Padukan offset-x, offset-y, blur, spread, color, dan inset untuk melaras kedalaman serta sempadan komponen dengan pantas.

Box-shadow mengawal kedalaman UI dan pemisahan layer melalui offset, blur, spread, color, dan inset.

Alat ini untuk jana nilai box-shadow dan menyemak kontras serta kebolehbacaan pada latar gelap/terang sebelum dipasang ke card, butang, dan modal sebenar.

Senario sesuai

Berguna apabila perlu menetapkan hierarki visual pada hover kad, penegasan butang, overlay modal, atau notifikasi toast.

Panduan parameter

x/y offset menetapkan arah, blur menetapkan kelembutan, spread menentukan keluasan, color menentukan tone dan inset menetapkan rasa kedalaman dalaman.

Semakan sebelum guna

Semak warna latar halaman sebenar, tone jenama, mod gelap, kontras teks butang dan padanan token sistem reka bentuk (jejari, jarak, tone bayang).

Output ini untuk pratonton segera dan copy. Sebelum penerapan akhir, semak semula pada UI sebenar kerana rendering berbeza mengikut latar dan token reka bentuk.

CSS box-shadow yang dijana

Cara guna

  1. 1 Tambah lapisan bayang dan laraskan nilai offset X/Y, blur serta spread.
  2. 2 Tukar warna dan pilihan inset sambil menyemak pratonton.
  3. 3 Salin CSS box-shadow yang dijana ke dalam stylesheet anda.

Contoh penggunaan umum

  • Mencipta CSS box-shadow untuk kad
  • Melaras beberapa lapisan bayang
  • Menyalin nilai inset shadow

Soalan lazim

Nilai bayang apa yang boleh saya laraskan?

Anda boleh melaras offset X/Y, blur, spread, warna, kelegapan dan inset, serta menambah atau membuang beberapa lapisan bayang.

Bolehkah CSS box-shadow yang dijana digunakan terus?

Ya. CSS box-shadow yang siap dipaparkan di bawah pratonton, dan butang salin akan menyalinnya ke papan klip anda.

Adakah pratonton dikemas kini apabila nilai berubah?

Apabila anda melaras slider atau nilai warna, kotak pratonton dan output CSS dikemas kini serta-merta.

Aliran kerja berkaitan

Penjana Box ShadowTetapkan kedalaman bayang untuk kad, butang atau panel supaya hierarki UI jelas. → Penjana Kod BarJika label atau panel mengandungi pengecam, semak berat visualnya berbanding kedalaman bayang yang dipilih. → Pemilih WarnaPadankan warna latar dan aksen supaya bayang kelihatan semula jadi pada kad dan butang.