Generator CSS Box Shadow
Buat kode CSS box-shadow secara visual: slider untuk offset, blur, spread, warna dengan opasitas, mode inset, dan hingga empat lapis dengan pratinjau langsung.
🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.
Hasil
Deklarasi box-shadow memiliki enam bagian yang bergerak — offset X dan Y, blur, spread, warna, dan kata kunci inset opsional — dan satu-satunya cara untuk membuatnya tepat adalah dengan melihatnya. Generator ini menempatkan setiap bagian pada slider dan menampilkan hasilnya pada kartu pratinjau saat Anda menggeser, sehingga baris CSS di bagian bawah selalu persis seperti yang Anda lihat.
Bayangan di dunia nyata jarang hanya satu lapis. Daftar lapisan memungkinkan Anda menumpuk hingga empat bayangan dalam satu deklarasi: garis gelap pekat untuk definisi tepi plus sapuan lembut lebar untuk elevasi, atau pasangan terang-dan-gelap yang mendefinisikan neumorfisme. Pilih lapisan untuk mengeditnya, hapus yang tidak diperlukan, dan nilai box-shadow gabungan diperbarui langsung.
Bayangan terlihat sangat berbeda di antarmuka gelap, di mana bayangan hitam di halaman yang nyaris hitam akan hilang begitu saja. Toggle latar pratinjau mengganti latar belakang antara terang dan gelap sehingga Anda bisa memeriksa kedua tema sebelum menerapkan. Halaman prasetel mencakup varian yang biasa dicari orang: bayangan elevasi lembut, kotak inset, resep neumorfisme dua lapis, dan bayangan kartu yang halus.
Seperti semua alat di situs ini, generator ini gratis dan sepenuhnya berjalan di browser Anda: tanpa unggahan, tanpa akun, dan tetap berfungsi secara offline setelah halaman dimuat.