Poin penting
- 01Setiap parameter box-shadow memiliki slider sendiri ditambah masukan numerik untuk penyetelan presisi piksel.
- 02Alihkan inset beralih antara bayangan jatuh dan bayangan dalam untuk efek ditekan atau neumorphic.
- 03Warna dan opacity dikendalikan secara terpisah, menampilkan rgba() untuk CSS yang dapat dibaca.
- 04Pratinjau menggunakan properti CSS nyata pada elemen nyata — apa yang Anda lihat persis apa yang stylesheet Anda render.
Mengapa Menggunakan Generator Visual Box-Shadow
CSS box-shadow mengambil hingga enam nilai — offset horizontal, offset vertikal, radius blur, radius spread, warna, dan kata kunci inset opsional. Mengetiknya dari memori bekerja untuk bayangan sederhana, tetapi untuk apa pun yang lebih bernuansa — cahaya ketat, bayangan jatuh dalam, lapisan elevasi lembut — Anda menebak dan memuat ulang sampai sesuatu terlihat benar.
Generator visual meruntuhkan loop iterasi itu. Pindahkan slider, lihat perubahan secara instan, dan salin hanya saat Anda puas. Generator box-shadow Handytool berjalan sepenuhnya di browser Anda, sehingga pratinjau adalah properti CSS nyata yang diterapkan pada elemen nyata — tidak ada perbedaan rendering antara alat dan halaman aktual Anda.
Cara Merancang Bayangan Kotak
- 01
Sesuaikan offset horizontal dan vertikal
Nilai positif memindahkan bayangan ke kanan dan ke bawah. Nilai negatif memindahkannya ke kiri dan ke atas. Bayangan berpusat (0, 0) menciptakan efek cahaya.
- 02
Atur radius blur
Nilai blur lebih tinggi menciptakan bayangan yang lebih lembut dan lebih tersebar. Blur nol menghasilkan outline bayangan keras dan solid.
- 03
Sesuaikan radius spread
Spread positif memperbesar bayangan sebelum blur. Spread negatif mengecilkannya, yang berguna untuk bayangan di bawah elemen yang ketat.
- 04
Pilih warna dan opacity
Gunakan pemilih warna untuk memilih nuansa bayangan, kemudian kurangi opacity untuk subtlety. Output menggunakan rgba() untuk menjaga nilai tetap dapat dibaca.
- 05
Alihkan inset jika diperlukan
Inset beralih dari bayangan jatuh ke bayangan dalam — berguna untuk tombol ditekan, masukan terbenam, dan permukaan neumorphic.
- 06
Salin deklarasi CSS
Klik Salin untuk mengambil nilai box-shadow penuh dan tempel ke stylesheet Anda.
Tidak Ada Unggahan, Tidak Ada Akun
Generator sepenuhnya sisi klien. Pilihan warna, nilai numerik, dan status pratinjau Anda tetap di browser Anda — tidak ada yang dikirim ke server. Tidak ada akun yang harus dibuat dan tidak ada batas penggunaan.
Karena elemen pratinjau menggunakan properti CSS box-shadow aktual, keluaran akurat menurut definisi — tidak ada rendering kanvas atau pendekatan screenshot yang terlibat. Nilai piksel yang Anda salin adalah nilai piksel yang diterapkan browser.
FAQ Generator Box-Shadow
Apa yang dilakukan nilai spread?
Spread positif memperbesar bayangan ke semua arah sebelum blur diterapkan; spread negatif mengecilkannya. Berguna untuk cahaya ketat yang ditentukan ketika dipasangkan dengan blur rendah.
Bisakah saya menambahkan beberapa bayangan kotak?
Generator ini menampilkan satu bayangan pada satu waktu. Untuk melapisinya, salin nilainya dan pisahkan beberapa bayangan dengan koma di CSS Anda — box-shadow menerima daftar yang dipisahkan koma.
Mengapa bayangan inset saya tidak terlihat?
Bayangan inset ditarik di dalam elemen, jadi mereka membutuhkan warna latar atau padding terlihat untuk ditampilkan. Mereka tidak akan muncul pada elemen transparan atau nol ukuran.
Apakah pratinjau akurat piksel?
Ya — pratinjau menggunakan properti CSS box-shadow aktual pada elemen DOM nyata, jadi apa yang Anda lihat persis apa yang stylesheet Anda akan diproduksi.
Apa itu bayangan neumorphic?
Neumorphism menggunakan dua bayangan — satu terang dan satu gelap — offset dalam arah berlawanan untuk membuat elemen tampak terangkat atau ditekan dari permukaan datar. Kedua bayangan biasanya inset untuk varian yang ditekan.