Generator UUID
Buat UUID acak dalam jumlah banyak.
Generator CSS box shadow
Bentuk bayangan dengan slider, tumpuk beberapa lapisan, dan salin CSS-nya.
File Anda tetap di perangkat Anda
Cara kerjanya
- 1Geser slider untuk offset, blur, dan spread.
- 2Pilih warna dan opasitas. Centang Inset untuk bayangan dalam.
- 3Tambahkan lapisan untuk membuat bayangan yang lebih lembut dan natural.
- 4Salin CSS-nya.
Fungsi tiap opsi
- Offset
- Jarak horizontal dan vertikal bayangan dari kotak. Nilai negatif bergerak ke kiri dan ke atas.
- Blur
- Seberapa lembut tepinya. Nol menghasilkan tepi yang tegas.
- Spread
- Memperbesar atau memperkecil bayangan sebelum diburamkan. Spread negatif menjaga blur besar agar tidak meluber ke samping.
- Inset
- Menggambar bayangan di dalam kotak, seperti kolom yang tertekan ke dalam.
- Lapisan
- Beberapa bayangan digambar bersamaan. Dua atau tiga lapisan tipis terlihat lebih natural daripada satu lapisan tebal.
Privasi
Semuanya berjalan di browser Anda. Yang Anda ketik tidak dikirim ke server.
Pertanyaan yang sering diajukan
Mengapa memakai lebih dari satu lapisan bayangan?
Bayangan asli tajam di dekat benda dan lembut di kejauhan. Bayangan kecil yang rapat ditambah satu bayangan besar yang lembut meniru hal itu, sehingga tampak lebih halus daripada satu blur saja.
Apakah box shadow mengikuti sudut yang membulat?
Ya, bayangan mengikuti border-radius elemen. Slider radius menampilkannya dan ikut disertakan dalam CSS yang disalin.
Apakah blur besar membuat halaman lambat?
Beberapa bayangan statis tidak masalah. Banyak bayangan blur besar, atau menganimasikannya, bisa berat di ponsel yang lemah. Animasikan opasitas pseudo-element sebagai gantinya.
Apa bedanya dengan drop-shadow()?
box-shadow mengikuti kotak persegi panjang. Filter drop-shadow() mengikuti bentuk yang terlihat, termasuk tepi transparan pada PNG dan SVG.
Bisakah hasilnya dipakai di Tailwind atau alat lain?
Nilai setelah box-shadow: adalah CSS biasa. Di Tailwind, taruh di arbitrary value dengan mengganti spasi menjadi garis bawah.