DevTulz Online

Generator CSS Box Shadow

Latar belakang

Apa itu CSS Box Shadow?

Properti CSS box-shadow menambahkan efek bayangan di sekeliling bingkai elemen. Bayangan dapat diimbangi, diburamkan, disebarkan, diwarnai, dan diatur sebagai inset (bayangan dalam). Beberapa bayangan yang dipisahkan koma dapat ditumpuk untuk efek yang kaya. Generator ini memungkinkan Anda membangun bayangan multi-lapis yang kompleks secara visual dan menyalin CSS siap tempel ke clipboard.

Cara Menggunakan Generator Box Shadow

  1. Sesuaikan penggeser untuk Offset X/Y, Blur, dan Spread untuk memposisikan dan membentuk bayangan.

  2. Klik kotak warna untuk memilih warna bayangan, dan gunakan penggeser Opacity untuk transparansi.

  3. Aktifkan 'Inset' untuk membuat cahaya dalam atau efek tertekan.

  4. Klik '+ Tambah lapisan' untuk menumpuk beberapa bayangan.

  5. Salin CSS yang dihasilkan dan tempel ke stylesheet Anda.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara box-shadow dan filter drop-shadow? box-shadow menambahkan bayangan di sekitar kotak perbatasan persegi panjang elemen dan mendukung bayangan inset. Filter CSS: drop-shadow() berlaku pada bentuk visual elemen (termasuk transparansi), membuatnya mengikuti garis besar non-persegi panjang seperti PNG dengan latar belakang transparan.

Bagaimana cara membuat efek elevasi kartu Material Design? Tumpuk dua bayangan kotak: bayangan sekitar yang lembut (blur besar, opasitas rendah, sedikit penyebaran) dan bayangan kunci (blur lebih kecil, opasitas lebih tinggi, offset arah). Contohnya: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Apakah box-shadow mempengaruhi tata letak halaman? Tidak. box-shadow tidak mempengaruhi ukuran atau posisi elemen dalam aliran dokumen. Tidak seperti outline, ia tidak menempati ruang tata letak dan tidak akan mendorong elemen lain.

Bisakah saya menganimasikan box-shadow? Ya. box-shadow dapat dianimasikan dengan transisi dan animasi CSS. Untuk performa, lebih suka mentransisikan box-shadow hanya jika diperlukan — browser tidak dapat mempercepat perubahan box-shadow dengan GPU seperti halnya transform atau opacity.

Keywords: generator CSS box shadow, box-shadow CSS, alat bayangan CSS, CSS drop shadow, inset shadow, bayangan multi-lapis, CSS shadow online