Box Shadow Generator — Visual CSS Shadow Editor
Buat CSS box-shadow dengan visual editor. Atur offset, blur, spread, warna, dan inset. Preview real-time, copy CSS langsung.
Apa itu CSS Box Shadow?
Box shadow adalah property CSS yang menambahkan efek bayangan di sekitar elemen. Dengan box shadow, desainer web dapat menciptakan kedalaman, dimensi, dan hierarki visual tanpa perlu gambar tambahan. Sintaksnya: box-shadow: offset-x offset-y blur spread color, dengan opsi inset untuk bayangan di dalam elemen.
Memahami Setiap Parameter
- Offset X — Geser bayangan horizontal. Positif ke kanan, negatif ke kiri.
- Offset Y — Geser vertikal. Positif ke bawah (biasanya untuk simulasi cahaya dari atas).
- Blur — Seberapa kabur bayangan. 0 = tajam, nilai tinggi = lembut menyebar.
- Spread — Memperbesar atau memperkecil ukuran bayangan. Positif memperbesar, negatif mengecilkan.
- Color — Warna bayangan. Gunakan rgba untuk transparansi natural.
- Inset — Balik bayangan ke dalam elemen (efek sunken/pressed).
Multiple Shadow & Neumorphism
Box shadow bisa digabung dengan koma untuk efek kompleks. Teknik neumorphism misalnya memakai dua shadow: satu terang di kiri-atas dan satu gelap di kanan-bawah, menciptakan ilusi elemen terangkat dari permukaan. Drop shadow materi Google Material Design juga layering beberapa shadow dengan blur berbeda untuk realism.
Tips Praktis
Gunakan warna shadow dengan alpha rendah (rgba(0,0,0,0.1)) untuk hasil natural. Shadow hitam pekat terlihat kartun. Offset Y lebih besar dari X biasanya terlihat paling natural karena cahaya umumnya datang dari atas. Untuk elemen besar, blur besar lebih enak dilihat. Untuk elemen kecil seperti button, shadow halus dengan blur 4-8px cukup.
Performance
Box shadow dengan blur besar bisa memberatkan rendering, terutama saat animasi. Untuk elemen yang sering di-animate, pertimbangkan mengganti box-shadow dengan filter:drop-shadow atau pakai pseudo-element yang dipakai sebagai shadow untuk performa lebih baik.
FAQ
Apakah box shadow didukung semua browser?
Ya, semua browser modern. Bahkan IE9+ sudah support.
Bisa pakai untuk text?
Untuk teks gunakan text-shadow (property berbeda). Box shadow hanya untuk elemen blok.
Bagaimana efek glow neon?
Pakai blur tinggi, spread kecil, warna cerah dengan alpha 1. Bisa gabung 2-3 shadow dengan warna sama untuk intensitas.