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

Soft CSS Box Shadow — 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.

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

Hasil

Halaman ini membuka generator box-shadow yang dimuat dengan bayangan lembut: tanpa offset horizontal, 8px ke bawah, blur 24px dan opacity hitam rendah 12%. Kartu pratinjau segera merendernya — geser penggeser apa pun dan baris CSS akan mengikuti secara real-time.

Bayangan lembut adalah tulang punggung antarmuka modern. Keburaman besar yang dipadukan dengan opacity rendah mengangkat kartu dari halaman tanpa menggambar garis luar yang tegas, itulah sebabnya sebagian besar sistem desain mempertahankan bayangan elevasinya tepat pada kisaran ini, bukan bayangan gelap dan pekat pada desain datar awal.

Salin garis bayangan kotak langsung ke stylesheet Anda, atau susun hingga tiga lapisan lagi untuk elevasi yang lebih kaya. Generator berjalan sepenuhnya di browser Anda — tidak ada yang diunggah di mana pun.

🛡️
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.