Handytool
PengembangGratisBerjalan secara lokal

Generator CSS box-shadow

Desain nilai CSS box-shadow dengan pratinjau langsung — offset, blur, penyebaran, opasitas, dan inset.

Pratinjau
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Sesuaikan slider untuk merancang bayangan — salin CSS ketika tampaknya benar.

Tentang Generator CSS box-shadow

Generator box-shadow Handytool memberi Anda slider untuk offset, blur, penyebaran, warna, dan opasitas — dan kartu pratinjau langsung yang diperbarui saat Anda menyeret. Beralih shadow inset, atur warna melalui picker, dan salin deklarasi box-shadow CSS yang dihasilkan langsung ke stylesheet Anda. Seluruh alat berjalan di browser Anda; tidak ada yang diunggah.

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.

Alat terkait

Pengembang →

Jelajahi alat lain

Semua alat →