Generator CSS box-shadow

Fitur Generator CSS box-shadow

• 01

  Setiap parameter sebagai slider

  Offset horizontal dan vertikal, radius blur, radius penyebaran, dan opasitas masing-masing memiliki slider mereka sendiri ditambah input numerik — fine-tune dengan seret, kemudian nudge dengan keyboard untuk presisi pixel.

• 02

  Shadow inset didukung

  Beralih toggle inset untuk beralih dari drop shadow ke inner shadow — berguna untuk tombol tekan, input tertanam, dan permukaan neumorphic.

• 03

  Warna + opasitas, terpisah

  Pilih warna dasar dalam nilai hex apa pun, kemudian sesuaikan opasitas secara independen. Output menggunakan rgba() sehingga warna dan alpha tetap terbaca saat Anda menyalin CSS.

FAQ Generator CSS box-shadow

Apa yang dilakukan nilai spread?

Spread positif memperbesar shadow di semua arah sebelum blur diterapkan; spread negatif mengecilnya. Ini berguna untuk cahaya yang ketat dan terdefinisi saat dipasangkan dengan blur kecil.

Bisakah saya menambahkan beberapa shadow?

Generator ini menampilkan deklarasi shadow tunggal. Untuk shadow berlapis, salin nilai, kemudian tempel dua kali di CSS Anda dipisahkan oleh koma — box-shadow menerima daftar yang dipisahkan koma.

Mengapa shadow inset saya tidak terlihat?

Shadow inset menggambar di dalam elemen, jadi mereka memerlukan warna latar belakang atau padding untuk terlihat. Mereka juga tidak akan muncul pada elemen transparan atau ukuran nol.

Apakah pratinjau akurat pixel?

Ya — pratinjau menggunakan properti box-shadow CSS aktual pada elemen nyata, sehingga apa yang Anda lihat adalah persis apa yang akan dirender stylesheet Anda.