Generator Box Shadow dengan Pratinjau Langsung
Generator box shadow ini memungkinkan Anda merancang box-shadow CSS apa pun secara visual, tanpa perlu menghafal sintaksnya. Geser slider untuk offset, blur, spread, dan opasitas, lalu lihat pratinjau diperbarui seketika sementara kode yang dihasilkan siap untuk disalin.
Alat ini dibuat untuk developer front-end dan desainer yang ingin bayangan rapi dengan cepat. Tumpuk hingga 10 layer bayangan independen untuk kedalaman yang realistis, mulai dari 9 preset bawaan seperti Elevated, Neumorph, atau Material, lalu sesuaikan warna, opasitas, dan inset setiap layer hingga tampak pas.
Cara Memakai Generator Box Shadow
Atur kontrol bayangan
Atur Offset X dan Offset Y untuk menggeser bayangan secara horizontal dan vertikal, lalu gunakan Blur untuk kelembutan tepi dan Spread untuk memperbesar atau memperkecilnya. Geser slider atau ketik nilai pasti di kolom angka di sebelahnya.
Tentukan warna, opasitas, dan inset
Pilih Warna bayangan dan geser opasitasnya dari 0 hingga 100%. Aktifkan tombol Inset untuk mengubah bayangan luar menjadi bayangan dalam demi efek tertekan atau cekung.
Tumpuk layer atau terapkan preset
Gunakan Tambah layer untuk menumpuk hingga 10 bayangan, pilih layer mana pun untuk menyuntingnya, dan klik ikon mata untuk menyembunyikan satu layer saat membandingkan. Atau klik preset seperti Soft atau Material untuk memuat tumpukan siap pakai dan menyesuaikannya dari sana.
Pratinjau, lalu salin CSS-nya
Ubah warna Latar dan Elemen serta ganti bentuk antara Membulat, Kotak, dan Lingkaran untuk menguji pada permukaan nyata. Saat tampak pas, klik Salin untuk menaruh seluruh aturan box-shadow ke clipboard Anda.
Fitur
Slider Visual
Offset X, Offset Y, Blur, dan Spread masing-masing punya slider yang berpasangan dengan input angka, jadi Anda bisa menggeser untuk kecepatan atau mengetik untuk presisi.
Warna & Opasitas
Pilih warna bayangan apa pun dan atur opasitasnya dari 0 hingga 100% untuk bayangan halus dan alami, bukan hitam pekat yang kaku.
Tombol Inset
Ubah setiap layer antara bayangan luar dan bayangan dalam untuk membuat efek tertekan, cekung, atau kolom input.
Hingga 10 Layer
Tumpuk beberapa bayangan dengan pengaturan independen, lalu tambah, hapus, atau sembunyikan tiap layer untuk membangun kedalaman bertahap yang realistis.
9 Preset Bawaan
Mulai dari Subtle, Elevated, Strong, Soft, Neon, Inset, Neumorph, Material, atau Float, lalu sesuaikan dengan desain Anda.
Pratinjau yang Disesuaikan
Ubah warna latar dan elemen untuk menguji bayangan Anda pada permukaan tempatnya benar-benar akan muncul.
Bentuk Pratinjau
Ganti elemen pratinjau antara Membulat, Kotak, dan Lingkaran agar cocok dengan komponen UI nyata yang sedang Anda gaya.
Pratinjau Langsung Real-Time
Pratinjau dan CSS yang dihasilkan diperbarui seketika saat Anda mengubah nilai apa pun, jadi tidak ada tebak-tebakan.
Salin Satu Klik
Aturan box-shadow lengkap, termasuk setiap layer, tersalin ke clipboard Anda dengan satu klik.
Pertanyaan yang Sering Diajukan
Apa itu properti box-shadow CSS?
box-shadow menambahkan bayangan di sekitar sebuah elemen. Nilainya, secara berurutan, adalah offset horizontal, offset vertikal, radius blur, radius spread, dan warna, dengan kata kunci opsional inset. Generator ini menyusun string itu untuk Anda dari slider.
Apa arti nilai offset, blur, dan spread?
Offset X menggeser bayangan ke kiri atau kanan, Offset Y menggesernya ke atas atau bawah, Blur mengatur seberapa lembut tepinya (0 berarti tepi tajam), dan Spread memperbesar bayangan dengan nilai positif atau memperkecilnya dengan nilai negatif.
Apa fungsi opsi inset pada box-shadow?
Tombol Inset mengubah bayangan dari bayangan luar menjadi bayangan dalam. Bayangan dalam berada di dalam elemen untuk menciptakan tampilan tertekan atau cekung, yang umum pada kolom input dan tombol aktif.
Bagaimana cara menambahkan banyak box shadow?
Klik Tambah layer untuk menumpuk bayangan baru di atas yang sekarang, hingga total 10 layer. Setiap layer menyimpan offset, blur, spread, warna, opasitas, dan inset-nya sendiri, dan generator menggabungkannya menjadi satu aturan box-shadow yang dipisahkan koma.
Bagaimana cara membuat bayangan halus dan lembut?
Gunakan opasitas rendah (sekitar 10 hingga 25%), hindari hitam pekat, dan tumpuk dua atau tiga bayangan lembut alih-alih satu yang kuat. Preset Soft dan Elevated dibuat persis dengan cara ini dan menjadi titik awal yang baik.
Bisakah saya memakai bayangan berwarna alih-alih hitam?
Bisa. Buka pemilih warna dan pilih corak apa pun yang cocok dengan palet Anda; bayangan berwarna sering tampak lebih kaya daripada hitam polos. Preset Neon menunjukkan cahaya berwarna yang dibangun dari spread dan warna yang mencolok.
Apakah CSS yang dihasilkan kompatibel dengan semua browser?
Ya. box-shadow didukung oleh setiap browser modern, termasuk Chrome, Firefox, Safari, dan Edge, dan tidak memerlukan prefix vendor, jadi Anda bisa menempelkan hasilnya langsung ke stylesheet Anda.
Belum ada komentar. Jadilah yang pertama berkomentar!