Generator box-shadow CSS

Apa itu Generator box-shadow CSS?

Generator box-shadow CSS adalah editor visual gratis untuk properti box-shadow CSS, dibuat untuk pengembang front-end dan desainer. Tambahkan satu atau beberapa lapisan bayangan dan setel offset-x, offset-y, radius blur, radius spread, warna, dan opsi inset tiap lapisan dengan input angka sederhana dan pemilih warna. Kotak pratinjau di atas latar papan catur menampilkan hasil gabungan secara real-time, dan deklarasi box-shadow lengkap — memisahkan setiap lapisan dengan koma — dibuatkan untuk Anda salin. Gunakan untuk membuat bayangan elevasi yang lembut, neumorfisme yang tajam, efek glow, atau kedalaman berlapis gaya Material tanpa menghafal urutan nilai.

Cara menggunakan Generator box-shadow CSS

1. Setel offset-x dan offset-y lapisan pertama (dalam px) untuk menggeser bayangan secara horizontal dan vertikal; nilai negatif menggesernya ke kiri atau ke atas.
2. Sesuaikan radius blur (seberapa lembut bayangannya) dan radius spread (seberapa jauh ia membesar atau mengecil).
3. Pilih warna dengan swatch atau ketik nilai heksa — heksa 8 digit seperti #00000040 menetapkan transparansi bayangan.
4. Centang kotak inset untuk menggambar bayangan di dalam elemen, bukan di luar.
5. Klik Tambah lapisan untuk menumpuk bayangan lain di atasnya, lalu atur ulang dengan mengedit nilai; hapus lapisan mana pun dengan tombol tempat sampahnya.
6. Perhatikan pratinjau diperbarui, lalu salin CSS box-shadow yang dihasilkan ke stylesheet Anda.

Contoh

x 0, y 4, blur 12, spread 0, warna #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Lapisan 1: 0 1 2 0 #0000001a · Lapisan 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset dicentang, x 0, y 2, blur 6, spread 0, warna #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Pertanyaan yang sering diajukan

Bagaimana urutan nilai box-shadow?

Setiap lapisan ditulis sebagai offset-x, offset-y, radius blur, radius spread, warna, dengan kata kunci inset opsional di depan. Alat ini selalu mengeluarkan keempat panjang dalam px (offset-x, offset-y, blur, spread) sehingga urutannya jelas dan mudah disetel secara manual setelahnya.

Bisakah saya menambahkan bayangan semi-transparan atau berwarna?

Bisa. Ketik warna CSS apa pun di kolom warna — heksa 8 digit penuh seperti #00000040 (dua digit terakhir adalah alfa) menghasilkan bayangan semi-transparan, dan Anda bisa memakai warna bernama atau heksa apa pun. Swatch pemilih menangani warna solid #rrggbb; untuk alfa, edit kolom teks.

Bagaimana cara menumpuk beberapa bayangan?

Klik Tambah lapisan untuk setiap bayangan tambahan. CSS yang dihasilkan memisahkan setiap lapisan dengan koma secara berurutan, dari atas ke bawah — lapisan pertama digambar terakhir (di atas). Gunakan ini untuk kedalaman berlapis gaya Material atau untuk menggabungkan glow luar dengan sorotan inset.

Apa fungsi kotak inset?

Inset menggambar bayangan di dalam batas elemen, menciptakan tampilan tertekan atau glow ke dalam alih-alih bayangan jatuh di luar. Centang per lapisan; Anda bisa mencampur bayangan inset dan luar dalam nilai box-shadow yang sama.

Apakah data saya diunggah ke suatu tempat?

Tidak. Generator ini berjalan sepenuhnya di browser Anda dengan JavaScript — warna dan nilai Anda tidak pernah dikirim ke server, jadi ia bekerja secara privat dan bahkan offline setelah halaman dimuat.