Generator Box-Shadow CSS: Pratinjau Langsung, Salin Kode

Generator box-shadow CSS

Generator ini membangun satu nilai CSS box-shadow dari enam kontrol: pergeseran horizontal, pergeseran vertikal, radius blur, radius sebaran, warna bayangan dengan penggeser opasitasnya sendiri, dan sakelar inset. Dua pemilih warna tambahan mengatur kotak pratinjau dan latar belakangnya, sehingga bayangan tetap terlihat jelas di latar terang maupun gelap, dan empat preset, soft, hard, glow, dan inset, memuat kombinasi siap pakai dengan satu klik. Setiap perubahan langsung memperbarui baris box-shadow di bawah pratinjau, siap untuk disalin.

Bagaimana nilai box-shadow dibentuk

CSS menulis bayangan dalam urutan angka yang tetap: pergeseran horizontal, pergeseran vertikal, radius blur, radius sebaran, lalu warna; untuk menggambar bayangan di dalam tepi kotak alih-alih di belakangnya, kata inset diletakkan di depan. Pergeseran horizontal dan vertikal menggeser bayangan ke samping atau ke atas-bawah, dan keduanya menerima nilai negatif hingga -50px, sehingga bayangan bisa jatuh di kiri kotak atau berada di atasnya. Radius blur, dari 0 hingga 100px, melembutkan tepi bayangan, dan radius sebaran, dari -50 hingga 50px, memperbesar atau mengecilkan bayangan terlepas dari ukuran kotak itu sendiri. Nilai heksadesimal dari pemilih warna dipecah menjadi komponen merah, hijau, dan biru, dan penggeser opasitas, dari 0 hingga 1, menjadi nilai keempat di dalam rgba(); pada 0 bayangan sepenuhnya transparan, pada 1 bayangan sama persis dengan warna yang dipilih.

Contoh perhitungan

Dengan pergeseran horizontal 6px, pergeseran vertikal 6px, blur 20px, dan sebaran 0px, bersama warna bayangan #0891b2 dan opasitas 0,25, hasilnya adalah box-shadow: 6px 6px 20px 0px rgba(8, 145, 178, 0.25). Kode heksadesimal #0891b2 terurai menjadi merah 8, hijau 145, dan biru 178, dan 0,25 dari penggeser opasitas langsung menjadi nilai keempat rgba() tanpa konversi tambahan. Menyalakan inset dengan enam nilai yang sama menggambar bayangan identik di dalam tepi kotak alih-alih di belakangnya, efek yang umum dipakai untuk tombol yang ditekan atau kolom input yang cekung.

Kode CSS siap disalin

.kartu {
  box-shadow: 6px 6px 20px 0px rgba(8, 145, 178, 0.25);
}