Generator Box Shadow CSS Online Gratis
Buat bayangan CSS secara visual dengan kontrol offset, blur, spread, dan warna. Salin kode dengan satu klik.
Who uses the Generator Box Shadow CSS?
- Developer UI yang menghasilkan bayangan kartu dan tombol sesuai spesifikasi sistem desain mereka.
- Pelajar CSS yang menjelajahi properti bayangan melalui antarmuka visual dengan umpan balik instan.
- Desainer yang membuat dan menguji efek bayangan untuk mockup sebelum diserahkan ke developer.
How the Generator Box Shadow CSS works
Sesuaikan slider offset X, offset Y, radius blur, dan radius spread untuk membentuk bayangan Anda.
Klik swatch warna untuk memilih warna bayangan, dan gunakan slider opacity di sampingnya.
Aktifkan Inset untuk efek bayangan dalam.
Salin CSS dari panel output kode.
Tips & tricks
- Alat ini menghasilkan satu lapisan bayangan — untuk efek multi-lapisan (seperti elevasi Material Design), hasilkan setiap lapisan di sini secara terpisah dan gabungkan dengan koma secara manual.
- Spread negatif dengan blur lebih besar menghasilkan bayangan lembut dan menyebar yang terlihat lebih "melayang" dibanding bayangan dengan spread positif yang rapat.
- Bayangan inset bekerja baik untuk state tombol tertekan — coba blur kecil dengan warna gelap beropacity rendah.
- Slider opacity mengontrol kanal alfa warna bayangan, bukan opacity elemen itu sendiri.
Frequently Asked Questions
Apa sintaks CSS box-shadow?
box-shadow: [inset] offset-X offset-Y radius-blur radius-spread warna. Contoh: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1). Beberapa bayangan dipisahkan koma.
Apa fungsi radius spread?
Radius spread memperluas atau mengecilkan bayangan sebelum blur. Nilai positif membuat bayangan lebih besar dari elemen; nilai negatif mengecilkannya. Spread -4px dengan blur 8px menghasilkan bayangan yang fokus dan terarah.
Apa itu bayangan inset?
Mencentang kotak Inset membuat bayangan muncul di dalam batas elemen, bukan di luar. Bayangan dalam menciptakan efek tombol tertekan/cekung, efek kartu terbenam, dan cahaya dalam.
Bisakah alat ini menghasilkan beberapa lapisan bayangan bertumpuk, seperti elevasi Material Design?
Tidak — alat ini menghasilkan satu lapisan bayangan setiap kali. Untuk efek berlapis seperti elevasi Material Design (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)), hasilkan setiap lapisan di sini secara terpisah dan gabungkan nilai yang dipisah koma secara manual.
Apakah box-shadow memengaruhi layout dan memakan ruang?
Tidak. Berbeda dengan margin atau padding, box-shadow tidak memengaruhi layout — elemen dengan bayangan tidak mendorong elemen di sekitarnya. Ini membuat bayangan aman ditambahkan tanpa mengganggu layout halaman.
Is my data safe when using the Generator Box Shadow CSS?
Completely safe. The Generator Box Shadow CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generator Box Shadow CSS output in commercial projects?
Yes. The Generator Box Shadow CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generator Box Shadow CSS follow official standards?
Yes. The Generator Box Shadow CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.