Mendesain elevation card atau modal yang tidak terlihat "murah dan kaku". Membuat style focus-ring untuk aksesibilitas (mis. glow outline 2px). Menyiapkan efek neon atau glow untuk CTA hero. Menyalin token elevation gaya Material Design atau Apple ke design system. Menghasilkan efek tombol pressed palsu atau inset card lewat "inset" depth.

Satu shadow besar terlihat artifisial. Elevation sungguhan adalah dua atau tiga layer ditumpuk: shadow ketat, gelap, dekat plus shadow lebar, lembut, jauh. Preset "Material elevation" menunjukkan polanya. Hitam murni terlalu berat. Pakai ~10–25% alpha hitam, atau tint shadow dengan komplemen warna permukaan. Shadow di-render di luar kotak. Kalau container-mu punya overflow: hidden , shadow akan terpotong. Pakai wrapper atau pindahkan overflow ke child. Shadow di background transparan. Kalau kotak tidak punya background , shadow akan menembus kotaknya sendiri — biasanya mengagetkan. Performance: blur sangat besar di banyak elemen bisa mahal di mobile low-end. Test di device sungguhan sebelum ship glow yang mewah. Dark mode. Shadow dark-on-dark yang subtle hampir hilang; pertimbangkan inner border terang atau shadow ber-tint terang di tema gelap.

Pembangun CSS Box Shadow

Susun box-shadow CSS tunggal atau berlapis secara visual. Atur offset, blur, spread, warna, dan salin CSS-nya.

Shadow layers

Preview

Sample

CSS

Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi

Untuk apa ini?

Properti CSS box-shadow adalah workhorse untuk menambah kedalaman — drop shadow di card, highlight tombol, focus ring, glow, efek neon, bahkan 3D palsu. Sintaksisnya (x y blur spread color, opsional inset, beberapa shadow dipisah koma) mudah dibaca tapi ribet diatur secara buta. Tool ini memberikan slider untuk tiap nilai dengan preview live, plus preset yang cocok dengan elevation design system umum.

Kapan digunakan

Mendesain elevation card atau modal yang tidak terlihat "murah dan kaku".
Membuat style focus-ring untuk aksesibilitas (mis. glow outline 2px).
Menyiapkan efek neon atau glow untuk CTA hero.
Menyalin token elevation gaya Material Design atau Apple ke design system.
Menghasilkan efek tombol pressed palsu atau inset card lewat "inset" depth.

Apa yang dilakukan tiap nilai

X / Y offset — arah jatuhnya shadow (Y positif = ke bawah). Pakai Y > 0 dan X kecil atau nol untuk kesan "cahaya dari atas".
Blur — seberapa lembut tepinya. 0 = tajam; makin besar = makin lembut.
Spread — seberapa lebih besar (atau lebih kecil bila negatif) shadow dari kotaknya.
Color & alpha — biasanya hitam dengan alpha parsial atau warna brand. Pure #000 terasa terlalu berat; coba #0003 sampai #0002 untuk kedalaman natural.
Inset — membalik shadow ke dalam, seperti indent.

Kesalahan umum

Satu shadow besar terlihat artifisial. Elevation sungguhan adalah dua atau tiga layer ditumpuk: shadow ketat, gelap, dekat plus shadow lebar, lembut, jauh. Preset "Material elevation" menunjukkan polanya.
Hitam murni terlalu berat. Pakai ~10–25% alpha hitam, atau tint shadow dengan komplemen warna permukaan.
Shadow di-render di luar kotak. Kalau container-mu punya overflow: hidden, shadow akan terpotong. Pakai wrapper atau pindahkan overflow ke child.
Shadow di background transparan. Kalau kotak tidak punya background, shadow akan menembus kotaknya sendiri — biasanya mengagetkan.
Performance: blur sangat besar di banyak elemen bisa mahal di mobile low-end. Test di device sungguhan sebelum ship glow yang mewah.
Dark mode. Shadow dark-on-dark yang subtle hampir hilang; pertimbangkan inner border terang atau shadow ber-tint terang di tema gelap.