Generator box shadow CSS
Bentuk shadow dengan slider dan salin CSS-nya.
Kotak dan latar
Jalan di browser kamu. Apa pun yang kamu ketik tidak dikirim ke mana pun.
- Tumpuk sampai 8 layer
- Shadow inset
- 6 preset siap pakai
Cara membuat box shadow CSS
- Mulai dari preset, atau geser slider offset, blur, dan spread.
- Tambah layer untuk shadow yang lebih lembut dan natural.
- Salin baris box-shadow-nya ke CSS kamu.
Fungsi tiap nilai box-shadow
| Nilai | Arti | Rentang umum |
|---|---|---|
| Offset X | Menggerakkan shadow ke kanan, atau kiri kalau negatif | -100 sampai 100px |
| Offset Y | Menggerakkan shadow ke bawah, atau atas kalau negatif | -100 sampai 100px |
| Blur | Melembutkan tepi; 0 memberi shadow bertepi tegas | 0 sampai 200px |
| Spread | Membesarkan atau mengecilkan shadow sebelum di-blur | -100 sampai 100px |
| Opacity | Seberapa pekat warna shadow terlihat | 10 sampai 30% untuk tampilan natural |
Nilai awal untuk tampilan umum
| Preset | Offset Y | Blur | Spread | Opacity |
|---|---|---|---|---|
| Soft | 10px | 30px | -5px | 20% |
| Sharp | 6px (X juga) | 0px | 0px | 100% |
| Glow | 0px | 24px | 4px | 55% |
| Inset | 2px | 6px | 0px | 25% |
Layered dan Floating dibangun dari nilai-nilai ini dengan menumpuk dua atau tiga shadow sekaligus, yang tidak bisa ditiru satu layer saja.
Tips untuk shadow yang terlihat natural
- Cahaya asli jarang menghasilkan shadow hitam pekat. Pakai opacity 10 sampai 30 persen, dan condongkan warnanya ke hue latar belakang untuk hasil yang lebih lembut.
- Tumpuk 2 atau 3 shadow: satu yang kecil dan rapat dekat kotaknya, dan satu lagi yang lebih besar dan lebih blur agak jauh, seperti cara preset Layered dan Floating dibuat.
- Spread negatif dengan offset vertikal besar memberi tampilan kartu melayang yang umum di interface modern.
- Induk dengan overflow: hidden memotong shadow persis seperti memotong konten, jadi tambahkan padding ke induknya alih-alih menghapus overflow di mana-mana.
FAQ Generator box shadow
Apa arti nilai-nilai box-shadow?
Berurutan: offset horizontal, offset vertikal, radius blur, radius spread, dan warna. Offset positif menggerakkan shadow ke kanan dan bawah, dan kata kunci inset menggambarnya di dalam kotak.
Bagaimana cara membuat shadow terlihat natural?
Tumpuk dua atau tiga shadow lembut dengan opacity rendah: satu yang kecil dan rapat dekat kotaknya, dan satu lagi yang lebih besar dan lebih blur agak jauh. Shadow asli jarang berwarna hitam pekat penuh.
Apa fungsi spread?
Spread membesarkan atau mengecilkan shadow sebelum di-blur. Spread negatif dengan offset vertikal besar memberi tampilan kartu yang melayang.
Kenapa shadow-ku terpotong?
Elemen induk dengan overflow: hidden memotong apa pun yang digambar di luar kotaknya, termasuk shadow. Tambahkan padding ke elemen induknya atau hapus pengaturan overflow-nya.
Berapa banyak layer shadow yang bisa ditumpuk?
Sampai 8 di halaman ini. CSS sendiri tidak punya batas pasti untuk layer box-shadow, tapi lebih dari 3 atau 4 jarang terlihat beda dan lebih berat digambar.
Apakah box shadow mengubah ukuran atau jarak elemen?
Tidak. Box-shadow murni visual dan tidak pernah memengaruhi layout, berbeda dengan border atau outline, jadi elemen di sekitarnya tidak pernah bergeser saat kamu menambah atau mengubah ukurannya.