Cara menggunakan Generator Box Shadow
- Pilih Box shadow atau Text shadow, lalu mulai dari preset seperti Layered (realistic) atau Neumorphism.
- Pilih satu lapisan, lalu atur offset X/Y, blur, spread, warna, opacity dan inset menggunakan slider atau kolom angka.
- Tambah, duplikat, atau hapus lapisan. Menumpuk beberapa bayangan lembut memberikan kedalaman yang paling natural.
- Ubah latar pratinjau, warna kartu dan radius agar sesuai dengan desainmu, lalu klik Salin CSS.
Apa itu properti CSS box-shadow?
box-shadow menggambar satu atau lebih bayangan di sekitar (atau di dalam) border box sebuah elemen. Setiap bayangan ditulis sebagai [inset] <x> <y> [blur] [spread] <color>, dan beberapa bayangan dipisahkan dengan koma. Bayangan pertama digambar paling atas. Bayangan mengikuti border-radius, tidak memengaruhi layout, dan tidak memicu scrollbar.
| Nilai | Fungsinya |
|---|---|
| Offset X / Y | Menggeser bayangan ke kanan/bawah (nilai negatif ke kiri/atas). |
| Blur | Melembutkan tepi bayangan; 0 menghasilkan bayangan tegas. Tidak boleh negatif. |
| Spread | Memperbesar (positif) atau memperkecil (negatif) bayangan sebelum di-blur. |
| Color | Biasanya warna gelap dengan opacity rendah, misalnya rgba(15, 23, 42, 0.08). |
| inset | Menggambar bayangan di dalam kotak, cocok untuk tombol yang ditekan dan area cekung. |
Bayangan berlapis yang realistis
Benda nyata memiliki bayangan kontak yang tegas plus bayangan ambient yang lebar dan lembut. Satu bayangan besar terlihat datar. Beberapa lapis dengan offset dan blur yang berlipat dua (1px, 2px, 4px, 8px, 16px…) serta opacity rendah akan terlihat alami. Coba preset Layered. Spread negatif pada lapisan besar yang di-blur (Elevated card) menjaga bayangan tetap di bawah kartu dan tidak bocor ke samping. Untuk hasil yang lebih bersih, beri sedikit warna latar pada warna bayangan alih-alih hitam pekat.
Neumorphism, glow, dan focus ring
Neumorphism memadukan bayangan terang (kiri atas) dan bayangan gelap (kanan bawah) pada elemen yang warnanya sama dengan latar. Hasilnya terlihat lembut, tetapi kontrasnya sangat rendah, jadi jangan hanya mengandalkan gaya ini untuk menampilkan tombol atau status. Bayangan dengan blur nol dan spread positif adalah focus ring yang bagus dan mengikuti border-radius: 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow memakai sintaks yang sama, tetapi tanpa spread dan inset. Gunakan secara halus agar teks tetap terbaca di atas gambar, atau tumpuk beberapa lapis untuk efek neon, outline, dan 3D retro (lihat preset Text shadow). Hindari bayangan pada teks isi karena membuatnya kurang tajam.
Tips performa dan Webflow
Bayangan besar yang di-blur relatif murah saat ditampilkan, tetapi mahal saat dianimasikan. Daripada melakukan transisi box-shadow saat hover, letakkan bayangan hover pada pseudo-element ::after lalu animasikan opacity-nya. Di Webflow, tambahkan setiap lapisan di panel Style pada bagian Effects → Box shadows (pilih Outside atau Inside). Tabel di bawah output CSS menampilkan nilai tiap lapisan, dengan spread diberi label Size seperti di Webflow. Padukan bayangan dengan latar dari CSS Gradient Generator.
Juga dicari sebagai: css box shadow, membuat box shadow css, generator text shadow, efek bayangan css, neumorphism css, layered shadow css, inset shadow css.
Tool yang cocok dipakai bersama Generator Box Shadow
- Generator Tombol CSS — Desain tombol yang terlihat bagus di setiap state.
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
- CSS Minifier — Tempel stylesheet untuk langsung memperkecil ukurannya.
Pertanyaan yang sering diajukan
Apa perbedaan blur dan spread pada box-shadow?
Bagaimana cara menambahkan bayangan hanya di satu sisi?
0 8px 6px -6px rgba(0,0,0,.3) untuk bayangan hanya di bagian bawah.Mana yang lebih baik, box-shadow atau filter: drop-shadow()?
box-shadow mengikuti kotak dan radius elemen, serta mendukung spread dan inset. filter: drop-shadow() mengikuti bentuk visual yang sebenarnya, termasuk PNG transparan dan SVG, tetapi tidak punya spread atau inset dan bisa lebih berat saat dirender.