Box Shadow Generator

Tentang alat ini

Horizontal — positif menggeser bayangan ke kanan, negatif ke kiri. Vertikal — positif ke bawah, negatif ke atas. Blur — nilai lebih besar menciptakan bayangan lebih lembut. Penyebaran — positif memperbesar bayangan, negatif memperkecilnya.

Aktifkan inset untuk membuat bayangan dalam. Tambahkan beberapa bayangan dengan "+ Tambah bayangan" — dipisahkan koma dalam CSS, berlapis dari depan ke belakang.

Cara penggunaan

1. Sesuaikan slider Horizontal dan Vertikal untuk mengatur offset bayangan.
2. Tingkatkan Blur untuk bayangan lembut, atau atur ke 0 untuk bayangan tajam.
3. Gunakan Penyebaran untuk memperluas atau memperkecil ukuran bayangan di luar elemen.
4. Klik "+ Tambah bayangan" untuk menumpuk beberapa bayangan demi efek yang lebih kaya.

Kasus penggunaan

Desainer menggunakan box-shadow untuk kedalaman dan elevasi pada komponen kartu. Bayangan inset menciptakan efek tombol ditekan. Beberapa bayangan berlapis menghasilkan pencahayaan realistis dengan cahaya ambient dan cahaya utama.

Pertanyaan umum

• Apa itu opsi inset? — Bayangan inset muncul di dalam batas elemen, bukan di luar. Berguna untuk membuat efek tertekan pada input dan tombol.
• Bisakah saya menambahkan beberapa bayangan? — Bisa. Klik "+ Tambah bayangan" untuk menambahkan lapisan bayangan lain. Semua bayangan digabungkan menjadi satu deklarasi box-shadow yang dipisahkan koma.
• Apa yang dilakukan nilai penyebaran negatif? — Penyebaran negatif mengecilkan bayangan lebih kecil dari elemen. Dikombinasikan dengan offset dan blur, ini menciptakan bayangan halus yang hanya terlihat dari satu sisi.