⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Card Shadow CSS — Kode bayangan kotak yang halus

Buat kode bayangan kotak CSS secara visual: penggeser untuk offset, blur, spread, warna dengan opacity, mode inset dan hingga empat lapisan dengan pratinjau langsung.

0px
4px
12px
0px
0.25
Memproses... 0%

Hasil

Halaman ini membuka preset generator bayangan kotak ke bayangan kartu klasik: 2px ke bawah, blur 8px, opacity hitam 15%. Ini sengaja dibuat senyap – cukup untuk memisahkan kartu dari halaman tanpa mengumumkannya sendiri – dan pratinjau menunjukkan dengan tepat betapa senyapnya.

Kisaran ini sesuai dengan langkah elevasi terendah di sebagian besar sistem desain: kartu daftar, menu tarik-turun, popover, dan baris tabel saat diarahkan. Jika Anda memerlukan daya angkat yang lebih kuat untuk modals atau panel mengambang, naikkan offset Y dan buramkan secara bersamaan — keduanya harus bertambah secara proporsional agar sumber cahaya tetap dapat dipercaya.

Salin garis bayangan kotak ke dalam gaya komponen Anda, atau duplikasikan sebagai lapisan kedua dengan keburaman yang lebih rapat untuk menambahkan definisi tepi. Alat ini gratis dan berjalan sepenuhnya di browser Anda.

🛡️
Dieksekusi di Browser

File dan masukan Anda tidak pernah keluar dari perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Penggeser untuk offset X/Y, buram, dan sebar dengan pembacaan piksel langsung, ditambah pemilih warna dengan penggeser opasitas terpisah.
  • Sisipkan kotak centang dan daftar lapisan: tambahkan, pilih, dan hapus hingga empat lapisan bayangan.
  • Garis CSS bayangan kotak yang dapat disalin yang mencakup semua lapisan, dipratinjau pada latar belakang terang atau gelap yang dapat dialihkan.

Manfaat Utama

✓ Setiap penggeser memperbarui kartu pratinjau dan baris CSS secara instan — tidak perlu menebak seperti apa tampilan 0 8px 24px rgba(...) sebenarnya.
✓ Hingga empat lapisan bayangan memungkinkan Anda membangun ketinggian realistis dan efek neumorfik yang tidak dapat diungkapkan oleh generator bayangan tunggal.
✓ Pengalih latar belakang terang/gelap menunjukkan bagaimana bayangan Anda terbaca pada kedua tema sebelum Anda mengirimkannya.

Kasus Penggunaan

  • • Panggil bayangan elevasi lembut untuk kartu produk dengan menyeret penggeser alih-alih mengedit nilai rgba() secara buta.
  • • Bangun efek neumorfisme terang/gelap dua lapis dan salin seluruh garis bayangan kotak multi-lapis dalam satu klik.
  • • Periksa latar belakang pratinjau gelap apakah bayangan Anda masih terbaca dalam mode gelap sebelum mengirimkan tema.