Generator Box Shadow CSS

Buat CSS box-shadow dengan pratinjau langsung.

Pengembang

Atur offset horizontal dan vertikal, blur, spread, dan warna untuk membuat box-shadow. Pratinjau diperbarui secara langsung. Salin CSS-nya. Berjalan di browser Anda.

box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);

Tentang Generator CSS Box Shadow

Box-shadow menambahkan bayangan di belakang elemen. Alat ini memungkinkan Anda mengatur offset horizontal dan vertikal, radius blur, spread, dan warna (dengan opsi inset). Pratinjau dan CSS diperbarui saat Anda mengubah nilai. Salin hasilnya ke stylesheet Anda.

Cara penggunaan

  1. Sesuaikan offset, blur, spread, dan warna. Centang Inset jika Anda menginginkan bayangan ke dalam.
  2. Salin CSS yang dihasilkan dan tempel ke proyek Anda.

Fitur Utama

  • Slider interaktif untuk offset, blur, spread, dan warna dengan pratinjau langsung
  • Toggle inset untuk efek bayangan ke dalam (tombol tertekan, elemen cekung)
  • Salin CSS satu klik — siap ditempel ke stylesheet mana pun
  • Kotak pratinjau langsung menampilkan persis bagaimana bayangan akan terlihat
  • 100% berbasis browser — tidak ada data yang meninggalkan perangkat Anda
  • Bekerja bersama CSS Gradient Generator untuk penulisan CSS visual yang lengkap

Kapan Menggunakan Alat Ini

  • Menambahkan elevasi dan kedalaman pada kartu, tombol, dan modal di UI Anda
  • Membuat efek bayangan material design atau neumorfisme
  • Membuat prototipe gaya bayangan sebelum menerapkannya ke kode
  • Mempelajari bagaimana parameter properti CSS box-shadow memengaruhi tampilan
  • Menghasilkan CSS dengan cepat tanpa membuka developer tools atau aplikasi desain

Detail Teknis

CSS yang dihasilkan mengikuti sintaks standar box-shadow: [inset] offset-x offset-y blur spread color. Nilai offset bisa negatif (bayangan bergerak ke kiri atau atas). Radius blur harus non-negatif; nilai yang lebih tinggi menghasilkan bayangan yang lebih lembut. Spread memperluas (positif) atau menyusutkan (negatif) bayangan relatif terhadap ukuran elemen. Warna dapat menyertakan transparansi alpha untuk efek halus (misalnya rgba(0,0,0,0.2)). Alat ini menghasilkan CSS standar yang didukung oleh semua browser modern tanpa vendor prefix.

Kesimpulan

CSS Box Shadow Generator menyederhanakan proses pembuatan bayangan kotak yang sempurna dengan antarmuka visual dan interaktif. Dapatkan CSS siap produksi dalam hitungan detik tanpa coding coba-coba — semuanya berjalan secara privat di browser Anda.

Pertanyaan yang Sering Diajukan

Apa itu inset?
Inset menggambar bayangan di dalam elemen, bukan di luar. Berguna untuk efek yang tertekan atau cekung.
Apakah input saya dikirim ke server?
Tidak. CSS dibuat di browser Anda. Tidak ada yang diunggah.
Bisakah saya menggunakan beberapa bayangan?
Alat ini menghasilkan satu bayangan. Untuk beberapa bayangan, salin output-nya dan tambahkan nilai yang dipisahkan koma ke box-shadow.
Apakah saya perlu vendor prefix?
Tidak. Properti box-shadow didukung oleh semua browser modern (Chrome, Firefox, Safari, Edge) tanpa vendor prefix. Hanya browser yang sangat lama (IE8 ke bawah) yang tidak mendukungnya.