Buat box shadow lapis demi lapis
Generator box shadow ini menulis properti CSS <code>box-shadow</code> untuk Anda. Tumpuk lapisan bayangan sebanyak yang Anda perlukan, atur offset horizontal dan vertikal, blur, spread, warna, dan opasitas tiap lapisan, ubah menjadi bayangan inset, dan lihat kotak pratinjau langsung berubah di latar apa pun. Mulai dari preset bayangan lembut, elevasi ala Material, neumorphism, offset tegas, dan glow, lalu salin CSS atau kelas Tailwind <code>shadow-[…]</code>. Tempel bayangan yang sudah ada untuk mengeditnya. Semuanya berjalan di browser Anda.
Cara membuat CSS box shadow
- 1Pilih preset yang mendekati keinginan Anda, atau pakai bayangan berlapis bawaan.
- 2Pilih sebuah lapisan lalu atur offset X dan Y, blur, spread, warna, dan opasitasnya. Aktifkan Inset untuk menggambarnya di dalam kotak.
- 3Gunakan Tambah lapisan, duplikasi, ubah urutan, dan sembunyikan lapisan untuk menggabungkan beberapa bayangan.
- 4Ubah latar, warna kotak, radius sudut, dan ukuran pratinjau agar sesuai desain Anda.
- 5Salin CSS atau kelas Tailwind.
Penjelasan nilai box-shadow
- Offset X dan Y
- Seberapa jauh bayangan digeser ke kanan dan ke bawah. Nilai negatif menggesernya ke kiri dan ke atas. Sumber cahaya di atas halaman berarti offset Y positif.
- Radius blur
- Seberapa lembut tepinya. 0 menghasilkan salinan kotak yang tajam; nilai lebih besar menyebarkan bayangan ke area yang lebih luas dan samar. Nilainya tidak boleh negatif.
- Radius spread
- Memperbesar atau memperkecil bayangan sebelum di-blur. Spread negatif dengan blur besar menjaga bayangan lembut agar tidak muncul di sisi-sisi, dan inilah trik di balik sebagian besar bayangan "lembut".
- Warna
- Biasanya hitam atau warna gelap dari latar dengan opasitas rendah. Bayangan yang diberi rona warna latar terlihat lebih alami daripada abu-abu murni.
- inset
- Menggambar bayangan di dalam border, bukan di luar, sehingga kotak tampak tertekan ke dalam. Bayangan inset dan luar bisa dicampur dalam satu deklarasi.
Mengapa menumpuk beberapa bayangan?
Bayangan nyata punya inti gelap dan rapat di tempat objek hampir menyentuh permukaan, serta penumbra lembut dan lebar di bagian luar. Satu lapisan box-shadow hanya bisa menggambar salah satunya. Menumpuk dua sampai lima lapisan dengan offset dan blur yang berlipat ganda, masing-masing dengan opasitas rendah, menghasilkan kedalaman halus dan realistis seperti pada design system modern. Preset Berlapis halus persis seperti itu.
Lapisan digambar dari depan ke belakang: lapisan pertama dalam daftar berada paling atas. Ubah urutannya dengan tombol panah dan sembunyikan lapisan dengan ikon mata untuk melihat kontribusinya. Lapisan yang disembunyikan tidak disertakan dalam CSS yang disalin.
Elevasi, neumorphism, dan gaya lainnya
Preset Elevasi 1–5 mengikuti bayangan kartu Material Design klasik: setiap level memadukan bayangan ambient dengan bayangan utama, sehingga kartu terangkat makin jauh dari halaman.
Neumorphism memakai dua bayangan pada kotak yang warnanya sama dengan latarnya: satu gelap digeser ke kanan bawah, satu terang digeser ke kiri atas. Efek ini hanya berhasil jika warna kotak dan latar sama, jadi preset mengatur keduanya. Offset tegas menghilangkan blur sepenuhnya untuk tampilan datar ala brutalist, dan Glow memakai offset nol dengan bayangan berwarna untuk focus ring dan efek neon di latar gelap.
Box shadow di Tailwind CSS
Kelas bawaan Tailwind shadow-sm sampai shadow-2xl mencakup kasus umum. Untuk yang lain, generator menulis nilai arbitrer seperti shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: spasi diganti garis bawah karena nama kelas tidak boleh berisi spasi, dan kelas ini berfungsi di Tailwind 3 dan 4 tanpa mengubah config Anda.
Padukan bayangan dengan latar dari generator gradien CSS, atau pastikan teks di kartu Anda tetap terbaca dengan pemeriksa kontras.
Bayangan dan performa
Radius blur besar digambar oleh GPU di semua browser saat ini dan ringan untuk elemen statis. Namun, menganimasikan box-shadow membuat elemen di-repaint di setiap frame; untuk menganimasikan kedalaman saat hover, taruh bayangan yang lebih besar di pseudo-element dan animasikan opacity-nya.
Pertanyaan yang sering diajukan
- Bagaimana sintaks box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;. Hanya kedua offset yang wajib. Pisahkan beberapa bayangan dengan koma, misalnya box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- Bagaimana cara membuat bayangan yang lembut dan halus?
- Gunakan hitam beropasitas rendah (10–20%), blur besar, offset Y kecil, dan spread negatif, misalnya 0 10px 30px -5px rgba(0,0,0,0.15). Menumpuk dua atau tiga bayangan seperti itu terlihat lebih halus lagi.
- Bagaimana cara memberi bayangan hanya di satu sisi?
- Geser bayangan ke sisi tersebut dan gunakan spread negatif kira-kira sebesar blur agar tidak terlihat di sisi lain, misalnya 0 8px 6px -6px rgba(0,0,0,0.3) untuk bayangan hanya di bawah.
- Apa fungsi inset?
- inset menggambar bayangan di dalam kotak, bukan di belakangnya, sehingga elemen tampak tertekan ke halaman. Ini umum dipakai pada kolom input dan tombol yang ditekan.
- Apa bedanya box-shadow dan drop-shadow?
- box-shadow mengikuti kotak dan border radius elemen. Fungsi filter: drop-shadow() mengikuti piksel yang benar-benar terlihat, seperti garis luar PNG transparan atau ikon SVG, tetapi tidak punya spread maupun inset.
- Bagaimana cara memakai box shadow kustom di Tailwind?
- Salin kelas Tailwind dari generator, berupa nilai arbitrer seperti shadow-[0_4px_12px_rgba(0,0,0,0.15)], lalu tambahkan ke elemen. Anda juga bisa memasukkan nilai CSS ke pengaturan boxShadow di theme agar punya nama.
- Bisakah saya mengedit bayangan yang sudah ada?
- Bisa. Tempel nilai box-shadow, deklarasi lengkap, atau kelas Tailwind shadow-[…] ke Impor. Panjang rem dan em dikonversi dengan 16px.
- Apakah CSS saya dikirim ke suatu tempat?
- Tidak. Generator ini berjalan sepenuhnya di browser Anda.