Input
Menyiapkan ruang kerja Anda…
Cara menggunakan
- Atur offset horizontal dan vertikal, blur serta spread.
- Pilih warna dan opasitas; aktifkan Bayangan inset bila perlu.
- Periksa pratinjau lalu pilih Salin CSS.
Membuat box shadow
Box shadow dapat memisahkan kartu dari latar atau memberi kesan permukaan cekung. Efeknya hanya memakai beberapa nilai yang dapat diatur tanpa menyiapkan gambar.
Pratinjau menampilkan bayangan selama geometri dan warnanya diubah. Pengaturan radius sudut membantu membandingkan bentuk tanpa menambahkan deklarasi lain ke hasil salinan.
Offset, blur dan spread
Offset horizontal dan vertikal memindahkan bayangan relatif terhadap elemen. Nilai negatif menggesernya ke kiri atau atas; nilai positif ke kanan atau bawah.
Blur melembutkan tepi dan tidak boleh negatif. Spread mengubah luas bayangan: nilai negatif memperkecil dan nilai positif memperbesar.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Satu bayangan luar dengan offset ke bawah 8px, blur 24px dan hitam beropasitas 15%.
Warna dan inset
Pemilih warna menentukan warna bayangan, sedangkan opasitas mengatur alpha. Pada opasitas rendah, latar halaman lebih terlihat.
Inset memindahkan bayangan ke dalam kotak. Generator membuat satu bayangan; beberapa lapisan memerlukan daftar bayangan yang dipisahkan koma dalam stylesheet.
Menggunakan CSS
Salin CSS hanya mengekspor box-shadow:. Atur border-radius secara terpisah agar elemen memiliki sudut seperti pada pratinjau.
Input teks hingga 1 MiB. Transformasi CSS dan HTML berjalan dalam worker dengan batas 30 detik. Alat warna menggunakan sRGB; gaya yang dihasilkan merupakan pratinjau dan perlu diuji dalam tata letak Anda sendiri.
Pertanyaan umum
Apakah radius sudut pratinjau disertakan dalam CSS?
Tidak. Radius hanya memengaruhi pratinjau. Tambahkan border-radius terpisah bila bentuk yang sama diperlukan.
Apa perbedaan blur dan spread?
Blur melembutkan tepi bayangan. Spread memperbesar atau memperkecil luasnya sebelum blur diterapkan.
Dapatkah spread bernilai negatif?
Ya. Spread negatif memperkecil bayangan; blur harus nol atau positif.
Dapatkah saya membuat bayangan dalam?
Ya. Aktifkan Bayangan inset agar deklarasi yang disalin menyertakan kata kunci inset.
Apakah beberapa lapisan bayangan dapat dibuat?
Tidak. Generator menghasilkan satu bayangan. Gabungkan nilainya dengan bayangan tambahan yang dipisahkan koma dalam stylesheet.