Cara menggunakan Generator box shadow
- 1
Pilih bayangan awal
Klik preset seperti Lembut, Berlapis, atau Elevasi 2, atau ubah lapisan bawaan.
- 2
Atur setiap lapisan
Pilih lapisan lalu atur offset X dan Y, blur, spread, warna, opasitas, dan inset.
- 3
Periksa di permukaan Anda
Ubah ukuran kotak, radius sudut, dan warna agar sesuai dengan elemen yang sedang Anda desain.
- 4
Salin CSS
Salin deklarasi box-shadow atau kelas Tailwind ke kode Anda.
Batas dan Pro
Gratis tanpa daftar: lapisan tanpa batas, offset dari −100 sampai 100 px, blur hingga 200 px, dan 12 preset bayangan.
Pro menghilangkan iklan; editor bayangan lengkap di setiap paket. Lihat Pro
Tentang Generator box shadow
Properti CSS box-shadow menerima daftar lapisan, masing-masing dengan offset horizontal dan vertikal, radius blur, jarak spread, warna, dan kata kunci inset yang opsional. Untuk mendapatkan kedalaman yang tampak natural, semua nilai itu harus diseimbangkan di dua lapisan atau lebih, dan ini sulit dilakukan dengan mengedit angka langsung di stylesheet. Editor ini menampilkan hasilnya pada kotak pratinjau langsung saat Anda menggeser slider, lalu menuliskan deklarasi CSS dan kelas Tailwind shadow-[…] untuk Anda.
Tambahkan lapisan sebanyak yang Anda mau, sembunyikan satu lapisan sementara untuk membandingkan, geser ke atas atau ke bawah — lapisan pertama dalam daftar digambar paling atas — atau ubah ke inset untuk tombol yang tampak ditekan dan kolom input. Offset berkisar dari −100 sampai 100 piksel, blur hingga 200 piksel, dan spread dari −100 sampai 100, dan setiap warna punya opasitasnya sendiri. Spread negatif adalah trik di balik bayangan lembut modern: bayangan ditarik ke bawah elemen sehingga hanya cahaya tipis yang terlihat di bawahnya.
Kotak pratinjau bisa diubah ukurannya dan diberi radius sudut, warna kotak, serta warna latar belakang apa pun, sehingga Anda bisa menilai bayangan pada permukaan desain yang sebenarnya, termasuk tema gelap yang butuh bayangan dengan opasitas lebih tinggi atau cahaya berwarna.
Ada dua belas titik awal: empat tingkat elevasi Material Design, satu lapisan lembut, bayangan halus lima lapisan, offset keras ala neubrutalism, neumorphism, bayangan dalam, cahaya berwarna, cincin garis tepi bergaya fokus, dan kartu melayang. Gradien ada di tab lain; bayangan teks dan filter drop-shadow() tidak tercakup.
Privasi
Bayangan dibuat dan dipratinjau sepenuhnya di halaman ini, dan lapisan Anda hanya disimpan di penyimpanan lokal browser ini agar tetap ada setelah halaman dimuat ulang. Tidak ada pengaturan atau desain yang dikirim ke server.