Generator Bayangan CSS

Editor box-shadow: seret cahaya untuk menempatkan bayangan, lalu susun berlapis hingga pas

Generator Bayangan CSS adalah alat untuk menyetel nilai box-shadow sambil melihat hasilnya langsung. Jika Anda menyeret cahaya di panggung, bayangan semua lapisan ikut berputar ke sisi yang berlawanan dengan cahaya. Jika Anda menyeret gagang bayangan, hanya posisi lapisan yang dipilih yang bergeser. Anda bisa menumpuk hingga 12 lapisan, dan nomor 1 di daftar digambar paling atas. Garis bantu menggambar tepi bayangan dan pita tempat blur menyebar untuk lapisan yang dipilih. Garis putus-putus kuning menunjukkan sejauh mana semua bayangan menjangkau keluar kotak, lengkap dengan angka untuk keempat sisinya.

Tampilan awalnya adalah bayangan lembut yang dipecah menjadi empat lapis, dengan geseran dan blur yang berlipat dua di setiap lapis. Pilih titik awal dari 24 contoh, sesuaikan latar, bentuk, dan ukuran dengan layar yang akan Anda pakai, lalu salin hasilnya sebagai CSS. Jika Anda butuh bayangan yang mengikuti bentuk, seperti pada ikon PNG atau SVG transparan, ganti cara menggambar ke drop-shadow. Anda akan mendapat kode filter dengan nilai blur yang sudah disesuaikan agar tampilannya sama.

Kapan dipakai

Bayangan memberi tahu mana yang melayang dan mana yang tertekan di layar. Nilai yang sama bisa tampak sangat berbeda tergantung latar dan bentuk, jadi lebih cepat memeriksanya dalam kondisi yang mendekati pemakaian nyata sebelum menulis kodenya.

• Saat membuat kartu, modal, atau dropdown tampak melayang: bayangan berlapis dari beberapa lapis tipis terlihat kurang keruh dibandingkan satu bayangan pekat. Mulailah dari contoh Lembut 4x atau Lebar 6x, lalu sesuaikan ketinggiannya dengan "Kecilkan/Besarkan" pada semua lapisan.
• Saat membuat kolom input atau tombol yang ditekan tampak masuk ke dalam: pakai bayangan dalam (inset). Contoh kolom input menggabungkan bayangan dalam di sisi atas dengan garis dalam 1px.
• Saat membuat cincin fokus atau penanda pilihan: bayangan yang hanya punya sebaran tanpa blur tampak seperti border yang tidak mendorong tata letak. Namun, pada mode warna paksa seperti High Contrast di Windows, box-shadow dinonaktifkan, jadi sertakan juga outline untuk penanda fokus.
• Saat memberi bayangan pada ikon atau logo transparan: box-shadow membuat bayangan berbentuk kotak. Jika bayangan harus mengikuti bentuk, pilih drop-shadow.
• Saat memeriksa di latar gelap atau berwarna: bayangan hitam yang disetel di layar terang hampir hilang di latar gelap. Ganti-ganti latar dan pastikan bayangan benar-benar terlihat.

Cara memakai

1. Pilih titik awal. Klik salah satu dari 24 contoh di bawah, lalu lapisan, latar, dan bentuk berubah sekaligus. Anda bisa mempersempit pilihan dengan kelompok (Dasar, Berlapis, Dalam, Warna/cahaya, Gaya).
2. Seret cahaya. Seret gagang berbentuk matahari di panggung mengelilingi lingkaran, dan geseran semua lapisan berputar dengan sudut yang sama. Dengan keyboard, tombol panah memutar 1°, dan 15° jika Anda menahan Shift.
3. Rapikan lapisan. Pilih lapisan di daftar, lalu ubah geser X/Y, blur, sebaran, warna, dan opasitas lewat bilah atau kolom isian. Menyeret gagang silang di panggung mengubah geser X dan Y lapisan yang dipilih sekaligus. Bayangan satu lapis dapat diubah menjadi bayangan berlapis yang lembut dengan "Pecah 4 lapis".
4. Sesuaikan dengan layar Anda. Samakan bentuk (kartu, tombol, lingkaran, kolom input, persegi, ikon transparan), ukuran, latar, dan warna elemen dengan tampilan nyata. Lihat angka pada garis putus-putus kuning untuk mengetahui seberapa jauh bayangan menyebar keluar kotak.
5. Salin. "Salin CSS" membawa kodenya, dan "Salin tautan" menyimpan kondisi saat ini sebagai alamat. Alamat memuat lapisan, latar, warna elemen, bentuk, ukuran, dan cara menggambar, serta tidak mengubah alamat ketika halaman pertama kali dibuka.

Fungsi kelima nilai

Satu lapis bayangan ditulis sebagai [inset] X Y blur sebaran warna. Panjang yang bisa ditulis dua sampai empat, dan panjang yang dilewatkan dibaca sebagai 0. Karena itu, jika blur dan sebaran bernilai 0, alat ini menghilangkan nilai tersebut dan menulisnya seperti 6px 6px #0F172A.

• Geser X dan Y: nilai positif menggeser bayangan ke kanan dan ke bawah, nilai negatif ke kiri dan ke atas. Jika cahaya datang dari kiri atas, bayangan jatuh ke kanan bawah.
• Blur: pada 0 tepinya setajam pisau, dan makin besar nilainya makin lebar tepi yang kabur. Nilai negatif tidak boleh dipakai.
• Sebaran: nilai positif memperbesar bayangan ke segala arah, nilai negatif memperkecilnya. Pada bayangan dalam, bagian yang bertambah berada di sisi dalam tepi, sehingga makin besar nilai positifnya, makin luas area bayangan.
• Warna: ditulis dalam HEX jika opasitas 100%, dan dalam rgba() jika lebih rendah. Jika warna dihilangkan, warna teks (currentColor) yang dipakai, sehingga alat ini selalu menuliskan warna.
• inset: menggambar bayangan seolah-olah latar menjatuhkan bayangan ke dalam kotak, bukan bayangan dari kotak yang terangkat dari latar.

Nilai blur adalah dua kali simpangan baku

Spesifikasi CSS menetapkan blur sebagai pendekatan blur Gaussian dengan simpangan baku setengah dari nilai blur. Setiap piksel harus cocok dengan hasil itu dalam batas 5%. Karena itu, pada tepi yang lurus, kepekatan berubah sejauh nilai blur ke dalam dan ke luar dari tepi bayangan, yaitu pada lebar dua kali nilai blur. Tepat di tepi bayangan, kepekatannya 50% dari aslinya, dan pada jarak sebesar nilai blur ke luar, turun menjadi 2,3%. Inilah alasan alat ini menghitung "margin luar" sebagai sebaran + blur ± geseran.

Penampang bayangan blur 16px yang diukur di Chromium 151 cocok dengan rasio pada tabel di atas dalam selisih 2,2 poin persentase. Jika blur diperbesar, bagian bayangan yang paling pekat mulai dari sejauh nilai blur ke sisi dalam tepi, sehingga pada elemen kecil dengan blur besar, hampir tidak ada bagian pekat yang tersisa.

Sebaran dan sudut membulat

Sebaran mendorong sisi lurus tepi bayangan keluar sejauh nilainya. Lebar dan tinggi tidak akan turun di bawah 0. Nilai sebaran juga ditambahkan ke radius sudut, tetapi jika radius lebih kecil daripada sebaran, jumlah yang ditambahkan dikurangi agar sudut membulat dan sudut siku tidak terputus. Jika radius adalah r dan besar pelebaran adalah e, jumlah yang ditambahkan adalah e × (1 + (r ÷ e − 1)³). Pada bayangan dalam, besar pelebaran adalah ukuran sebaran yang negatif.

Tepi putus-putus pada garis bantu di panggung digambar menurut aturan ini. Contoh "Hanya bawah" (0 10px 8px -8px) dengan sebaran negatif memperkecil bayangan hingga lebih kecil dari kotak, lalu menggesernya ke bawah, sehingga di atas dan di kedua sisi hampir tidak ada bayangan yang terlihat.

Berlapis: urutan dan bayangan lembut

Beberapa bayangan dapat ditulis dengan dipisahkan koma. Bayangan pertama dalam daftar digambar paling atas, dan sisanya berurutan di belakangnya. Saat menumpuk warna yang sama, urutan hampir tidak terlihat, tetapi saat menumpuk cincin sebaran dengan warna berbeda seperti pada cincin pelangi, cincin yang kecil harus berada di depan agar semua warna terlihat.

Ahlin (2019) memperkenalkan cara menumpuk bayangan tipis dengan geseran dan blur yang berlipat dua, seperti 1, 2, 4, 8px, yang menangani tepi lebih alami daripada bayangan satu lapis. "Kepekatan di area tumpang tindih" pada tabel di bawah dihitung dengan 1 − (1 − a₁)(1 − a₂)… untuk bagian tengah tempat semua lapis saling menimpa.

"Pecah 4 lapis" membuat empat lapis dari geseran, blur, dan sebaran lapisan yang dipilih dengan faktor 1/8, 1/4, 1/2, dan 1. Opasitas tiap lapis ditentukan dengan 1 − (1 − a)^(1/4) agar kepekatan di area tumpang tindih sama dengan aslinya. Misalnya, jika 0 8px 8px dengan opasitas 48% dipecah, 0 1px 1px, 0 2px 2px, 0 4px 4px, dan 0 8px 8px masing-masing menjadi 15%, sama dengan contoh Lembut 4x. Setelah lapisannya bertambah, atur seluruhnya sekaligus dengan "Kecilkan/Besarkan" (×0,8 dan ×1,25) serta "Lebih pucat/Lebih pekat" pada semua lapisan.

Bayangan dalam (inset)

Bayangan dalam menganggap seluruh area di luar kotak padding tidak tembus pandang, lalu menggambar bayangan itu di dalam kotak. Bayangan tidak keluar dari kotak padding, dan digambar tepat di atas latar elemen serta di bawah border. Karena itu, pada elemen yang punya border, bayangan mulai dari sisi dalam border.

• Kolom input dan tombol yang ditekan: bayangan dalam tipis di sisi atas (inset 0 2px 4px) membuat kolom tampak lebih rendah daripada latarnya.
• Garis dalam: inset 0 0 0 2px bisa dipakai seperti border yang tidak mengubah ukuran, sehingga tata letak tidak bergeser saat menandai kartu yang dipilih.
• Permukaan cekung: pada elemen yang warnanya sama dengan latar, bayangan dalam gelap dan bayangan dalam terang yang diletakkan berlawanan arah membuatnya tampak seperti permukaan yang melesak.

Misalnya, jika bayangan dalam diaktifkan dengan geser X 12px, geser Y 8px, blur 18px, sebaran −2px, warna #336699, dan opasitas 35%, hasilnya adalah inset 12px 8px 18px -2px rgba(51, 102, 153, 0.35). Bayangan dalam tidak menyebar keluar kotak, sehingga tidak termasuk dalam margin luar.

Perbedaan box-shadow dan filter: drop-shadow()

box-shadow membuat bayangan berbentuk kotak border elemen, sedangkan drop-shadow() membuat bayangan mengikuti bentuk transparansi hasil gambar elemen. Jika Anda mengubah bentuk ke ikon transparan dan beralih antara kedua cara ini, perbedaannya langsung terlihat.

Spesifikasi Filter Effects menetapkan nilai ketiga drop-shadow() sebagai simpangan baku, bukan radius blur. Di Chromium 151, penampang drop-shadow(… 10px) dan box-shadow … 20px terbukti digambar sama, dan alat ini juga menulis nilai blur setengahnya saat beralih ke drop-shadow. Lapisan yang punya sebaran ditulis tanpa sebaran, bayangan dalam dihilangkan, dan hal itu diberitahukan di bawah kode. Jika beberapa drop-shadow dirangkai, bayangan berikutnya ikut membuat bayangan dari bayangan sebelumnya, sehingga hasilnya lebih pekat dan lebih lebar daripada box-shadow berlapis dengan nilai yang sama.

Bayangan tidak memakan ruang

Bayangan tidak memengaruhi tata letak dan dapat tumpang tindih dengan kotak atau teks lain. Bayangan juga tidak membuat scroll, jadi halaman tidak melebar karenanya. Sebagai gantinya, bayangan terpotong jika induknya memakai overflow: hidden atau jika kartu menempel pada tepi kotak yang bisa di-scroll.

Agar tidak terpotong, sisakan ruang untuk tiap bayangan luar sejauh sebaran + blur, dikurangi atau ditambah geseran pada arah tersebut. Contoh Lembut (0 4px 12px) memerlukan 8 di atas · 12 di kanan · 16 di bawah · 12px di kiri. Garis putus-putus kuning di panggung dan kalimat di bawah CSS menunjukkan nilai ini untuk bayangan Anda saat ini.

Latar gelap dan latar berwarna

Bayangan adalah efek yang tampak karena menggelapkan latar, sehingga hampir tidak terlihat jika latarnya sudah gelap. Tabel di bawah memuat warna di area yang tertutup bayangan hitam 20% dan kontras luminans antara warna itu dengan latarnya, hasil perhitungan.

Bayangan yang sama terlihat dengan kontras 1,61:1 di latar putih, tetapi hampir hilang di latar #0F172A karena kontrasnya 1,05:1. Di layar gelap, daripada memekatkan bayangan, cara yang lebih terlihat adalah membuat permukaan elemen lebih terang daripada latar, atau menambahkan garis dalam yang terang di sisi atas untuk menunjukkan ketinggian. Di atas latar berwarna, bayangan abu-abu bisa tampak keruh, jadi pertimbangkan bayangan dengan rona yang sejenis, seperti pada contoh "Bayang warna".

Saat bayangan digerakkan

Bayangan bergerak dengan mencampur nilai hasil perhitungannya. Jika panjang kedua daftar berbeda, bayangan 0 0 0 0 yang transparan ditambahkan di ujung daftar yang lebih pendek agar sama panjang, tetapi jika bayangan di posisi yang sama berbeda dalam hal inset, keduanya tidak dapat dicampur dan nilainya berganti seketika. Agar kartu terangkat saat kursor diarahkan, paling aman menjaga jumlah lapis dan urutan inset bayangan sebelum dan sesudah perubahan tetap sama. Panggung alat ini juga mengikuti aturan ini saat contoh diganti: tetap berganti mulus walau jumlah lapisnya berbeda, tetapi langsung berganti jika bayangan di posisi yang sama berbeda status inset-nya. Jika perangkat mengaktifkan pengurangan gerakan, transisi di panggung dimatikan.

Dukungan browser

Angka-angkanya adalah versi pertama yang memuat fitur tersebut menurut data kompatibilitas browser MDN. Nilai drop-shadow() untuk Chrome 18 dan Safari 6 berasal dari masa ketika fitur ini dipakai lewat -webkit-filter, dan pada browser yang dipakai sekarang prefiks tidak diperlukan.

Kesalahan yang sering terjadi

• Memakai box-shadow pada PNG transparan: yang muncul adalah bayangan persegi, bukan mengikuti bentuk ikon. Pakai drop-shadow.
• Memindahkan blur box-shadow apa adanya ke drop-shadow: arti nilai ketiganya berbeda, jadi hasilnya dua kali lebih buram. Tulis setengahnya.
• Lupa overflow: hidden pada induk: bayangan kartu terpotong. Sisakan padding sebesar margin luar.
• Bayangan yang mendekati hitam 100%: layar tampak berat dan kotor. Perbesar blur dan turunkan opasitas, atau pecah menjadi beberapa lapis.
• Sebaran positif yang besar: jika sebaran lebih besar daripada blur, bayangan tampak seperti border. Atur sebaran dalam rentang yang kecil.
• Memakai bayangan layar terang apa adanya di layar gelap: kontras turun hingga 1,05:1 sehingga ketinggian tidak terlihat.
• Mengira bayangan pertama berada paling bawah: bayangan pertama dalam daftar berada paling atas.

Batasan dan catatan

• Spesifikasi tidak menentukan metode blur yang pasti, hanya mensyaratkan kecocokan dalam 5% dengan blur Gaussian. Kepekatan tepi bisa sedikit berbeda antarbrowser.
• Pratinjau digambar dengan CSS sebenarnya oleh browser yang sedang Anda pakai. Tampilan di browser lain perlu diperiksa di browser itu.
• Panjang hanya dalam px, dan desimal hanya satu digit. Geser X dan Y sampai ±300px, blur 0 sampai 300px, dan sebaran sampai ±150px. Bilah hanya bergerak dalam rentang yang lebih sempit, sedangkan kolom isian menerima seluruh rentang.
• Saat Anda memutar cahaya atau menekan "Kecilkan/Besarkan", nilai dibulatkan ke satuan 0,1px. Jika diulang berkali-kali, nilainya bisa sedikit menyimpang dari nilai awal.
• Opasitas pada "Kepekatan di area tumpang tindih" dan "Pecah 4 lapis" dihitung dengan anggapan bahwa warna yang sama ditumpuk. Hitungan ini tidak berlaku untuk lapisan dengan warna berbeda.
• Margin luar menganggap jangkauan bayangan hanya sampai radius blur. Di luar itu masih tersisa bayangan sangat tipis dengan kepekatan 2,3% ke bawah. drop-shadow dihitung berdasarkan kotak, sehingga pada bentuk yang lebih kecil daripada kotaknya, seperti ikon, hasilnya tampak lebih lebar daripada yang sebenarnya.
• Data kompatibilitas MDN masih memuat catatan bahwa bayangan luar membuat scrollbar di Chrome, Firefox, dan Safari. Hal itu tidak terjadi di Chromium 151, tetapi Firefox dan Safari belum diukur.
• Pada mode warna paksa, box-shadow menjadi none. Informasi yang hanya disampaikan lewat bayangan (fokus, pilihan, pemisah) perlu ditunjukkan juga dengan border atau outline.

Tanggal acuan Spesifikasi CSS, data kompatibilitas MDN, Ahlin (2019), dan nilai Material Components diperiksa pada sumber aslinya pada 2026-10-21. Kepekatan, radius sudut, dan kontras pada tabel adalah nilai yang dihitung langsung dengan inti perhitungan alat ini, sedangkan blur drop-shadow dan ada tidaknya scroll adalah hasil pengukuran di Chromium 151.

Sumber

• 01W3C: CSS Backgrounds and Borders Module Level 3 — box-shadowCandidate Recommendation Draft 2024-03-11. §6.1 arti nilai, panjang yang dilewatkan bernilai 0, warna bawaan currentColor; §6.1.1 bentuk bayangan dan rumus sudut sebaran; §6.1.2 simpangan baku = blur ÷ 2 dan toleransi 5%; §6.1.3 bayangan pertama paling atas, tidak memengaruhi tata letak dan scroll, animasi mencampur nilai hasil perhitungan
• 02W3C: Filter Effects Module Level 1 — drop-shadow()Working Draft 2018-12-18. Panjang ketiga adalah simpangan baku, bukan radius blur; sebaran dan banyak bayangan tidak diterima
• 03W3C: CSS Color Adjustment Module Level 1Candidate Recommendation Snapshot 2025-12-16. §3.1 pada mode warna paksa, box-shadow dan text-shadow dihitung sebagai none
• 04MDN: box-shadowTabel kompatibilitas browser: tanpa prefiks Chrome 10, Edge 12, Firefox 4, Safari 5.1; catatan scrollbar pada bayangan luar
• 05MDN: drop-shadow()Tabel kompatibilitas browser: Chrome 18, Edge 12, Firefox 35, Safari 6
• 06MDN: filterTabel kompatibilitas browser: tanpa prefiks Chrome 53, Edge 12, Firefox 35, Safari 9.1; sebelumnya memakai -webkit-filter
• 07Tobias Ahlin: Smoother & sharper shadows with layered box-shadows2019-09-19. Contoh 4, 5, dan 6 lapis dengan geseran dan blur yang berlipat dua, beserta opasitasnya (nilai pada contoh Lembut 4x, Tajam 5x, Lebar 6x, dan Mimpi 6x)
• 08Material Components for the web: _elevation-theme.scssNilai umbra, penumbra, dan ambient pada elevation 2 serta opasitas 0,2, 0,14, dan 0,12 (contoh Material 2)

Pertanyaan yang sering diajukan

Alat yang dipakai bersama