🌫️

box shadow CSS

Buat nilai box-shadow CSS secara visual. Sesuaikan offset, blur, spread, warna, dan opasitas dengan pratinjau langsung. Tumpuk beberapa lapisan dan salin CSS akhir.

Alat Generator Berjalan lokal Tidak ada data dikirim
cssbox-shadowpembuatdesain
Lapisan
Offset X4px
Offset Y4px
Blur8px
Sebaran0px
%
Inset

Apa itu box shadow CSS?

box shadow CSS memungkinkan Anda membuat nilai box-shadow secara visual dan langsung menyalin CSS. Sesuaikan offset, blur, sebaran, warna, dan opasitas dengan pratinjau langsung.

Cara Menggunakan Generator Box Shadow

  1. Sesuaikan slider Offset X/Y, Blur, dan Sebaran.
  2. Pilih warna bayangan dan atur opasitas.
  3. Aktifkan Inset untuk efek bayangan dalam.
  4. Tambahkan lebih banyak lapisan untuk bayangan yang kompleks.
  5. Salin CSS dan tempelkan ke proyek Anda.

Alat Terkait

🌈
gradient CSS
Buat gradien CSS linear dan radial
🖌️
color picker
Pilih dan konversi warna antarformat
🎨
Pemformat CSS
Format dan percantik kode CSS
Pelajari Lebih Lanjut▾
Parameter Box Shadow
  • Offset X/Y —menggeser bayangan secara horizontal dan vertikal
  • Blur —seberapa lembut/buram tepi bayangan
  • Sebaran —memperluas atau menyusutkan ukuran bayangan
  • Inset —merender bayangan di dalam elemen
Pertanyaan yang Sering Diajukan
Bisakah saya menambahkan beberapa bayangan?

Ya. Klik 'Add Layer' untuk menumpuk beberapa nilai box-shadow, digabungkan dengan koma di CSS keluaran.

Bagaimana cara menggunakan CSS yang dihasilkan?

Klik 'Copy CSS' dan tempel properti box-shadow langsung ke file CSS atau blok style Anda.