Generator Box Shadow CSS

Atur offset, blur, spread, warna, dan opasitas dengan slider langsung, lihat hasilnya di atas permukaan terang atau gelap, lalu salin box-shadow CSS yang bersih — semuanya di browser Anda.

Pratinjau

Bayangan

Offset X

Offset Y

Blur

Spread

Warna

#0a0a0a

Opasitas

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

Cara menggunakan Generator Box Shadow CSS

1
Atur offset
Gunakan slider offset X dan Y untuk menggeser bayangan ke kiri, kanan, atas, atau bawah. Nilai Y positif menjatuhkan bayangan di bawah elemen, sedangkan nilai negatif mengangkatnya ke atas.
2
Bentuk bayangannya
Naikkan Blur untuk tepi yang lembut dan menyebar, atau biarkan rendah untuk bayangan yang tajam. Spread memperbesar atau memperkecil bayangan sebelum blur diterapkan.
3
Pilih warna dan opasitas
Klik kotak warna untuk memilih warna bayangan, lalu atur opasitasnya. Bayangan gelap yang lembut dengan opasitas rendah terlihat paling alami di atas latar terang.

4
Salin CSS-nya
Aktifkan Inset jika Anda butuh bayangan di dalam, lihat pratinjaunya di atas permukaan terang atau gelap, lalu salin baris box-shadow ke stylesheet Anda.

Pertanyaan yang sering diajukan

Bagaimana cara membuat box shadow CSS?

Atur offset horizontal dan vertikal, blur, serta spread dengan slider, pilih warna dan opasitas, lalu box-shadow CSS akan dibuat secara langsung di bawahnya. Salin dan tempel ke elemen mana pun.

Apa arti setiap nilai pada box-shadow?

Nilainya adalah offset horizontal, offset vertikal, radius blur, dan radius spread, diikuti warna. Offset menggeser bayangan, blur melembutkan tepinya, dan spread mengubah seberapa besar bayangan sebelum diburamkan.

Apa itu inset shadow?

Inset shadow digambar di dalam elemen, bukan di belakangnya, sehingga permukaan tampak tertekan ke dalam atau cekung. Beralih antara Luar dan Dalam (inset) untuk mengganti antara bayangan di luar dan di dalam.

Bagaimana membuat bayangan yang lembut dan alami?

Gunakan offset vertikal kecil, blur yang cukup besar, spread sedikit negatif, dan warna gelap dengan opasitas rendah, sekitar 10 hingga 25 persen. Bayangan yang keras dan sepenuhnya pekat cenderung terlihat tidak alami.

Apakah data saya diunggah ke server?

Tidak. Generator ini berjalan sepenuhnya di browser Anda. Tidak ada yang diunggah, dicatat, atau disimpan, sehingga pekerjaan Anda tetap privat dan alat ini tetap berfungsi bahkan saat Anda offline.

Alat terkait

Lanjutkan dengan alat praktis ini

Konverter HTML ke Teks

Pemformat JSON

Penguji Regex

Dekoder JWT

Generator Gradien CSS

Konverter Teks ke HTML