Generator CSS box-shadow
Geser slider dan salin CSS-nya.
- Berjalan di browser Anda — teks Anda tidak pernah dikirim ke mana pun
- Tanpa pendaftaran, tanpa kuota, gratis dipakai sesering yang Anda mau
Cara kerjanya
Box-shadow menerima empat angka dan satu warna dalam urutan tertentu, dan perbedaan antara bayangan yang terbaca sebagai kedalaman dan yang terbaca sebagai stiker sepenuhnya ada pada angka-angka itu. Melihatnya berubah saat Anda menggeser jauh lebih cepat daripada menebak.
Arti keempat angka itu
Berurutan: offset horizontal, offset vertikal, radius blur, dan spread. Offset menggeser bayangan; blur melembutkan tepinya; spread memperbesar atau memperkecilnya sebelum diburamkan. Spread negatif menarik bayangan ke dalam, yang merupakan cara mendapatkan bayangan rapat di bawah kartu tanpa meluber ke samping.
Membuatnya tampak nyata
Cahaya biasanya datang dari atas, jadi offset vertikal positif kecil tanpa offset horizontal terbaca natural. Bayangan besar yang sangat transparan terbaca sebagai kedalaman yang lembut; bayangan kecil, gelap, dan tajam terbaca sebagai stiker potongan. Benda nyata menghasilkan bayangan yang makin buram semakin jauh dari permukaan — blur yang lebih besar menyiratkan elemen yang lebih tinggi.
Bayangan inset
Bayangan inset digambar di dalam elemen, bukan di luar, yang merupakan cara tombol yang ditekan, kolom input, dan panel cekung dibuat. Empat angka yang sama berlaku, hanya mengarah ke dalam.
Beberapa bayangan sekaligus
CSS menerima daftar yang dipisahkan koma, dan menumpuk dua — satu rapat dan gelap, satu lebar dan samar — tampak jauh lebih baik daripada satu saja. Generator ini menghasilkan satu; tempelkan dua bersama sendiri untuk efek berlapis.
Generator CSS box-shadow — pertanyaan
Dalam urutan apa nilai-nilainya?
Offset horizontal, offset vertikal, blur, spread, lalu warna.
Apa yang dilakukan spread negatif?
Spread negatif menyusutkan bayangan sebelum diburamkan, sehingga bayangan tetap rapat di bawah elemen alih-alih meluber ke samping.
Apa itu bayangan inset?
Bayangan yang digambar di dalam elemen, bukan di luar — digunakan untuk tombol yang ditekan dan kolom input.
Bisakah saya membuat bayangan berlapis?
Tidak secara langsung. CSS menerima daftar yang dipisahkan koma, jadi buat dua bayangan dan tempelkan bersama.