Kategori: Alat pengembang
Generator Box Shadow CSS
Rancang box-shadow lalu salin CSS-nya
Atur pergeseran, kaburan, sebaran, warna, dan opasitas, lihat pratinjau langsung, lalu salin deklarasi box-shadow yang siap tempel. Semuanya digambar oleh peramban Anda sendiri.
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
box-shadow menerima lima nilai dalam urutan tetap, dan perubahan kecil pada salah satunya terbaca sangat berbeda di layar, sehingga menulisnya tanpa melihat hasilnya terasa merepotkan. Alat ini menggambar deklarasi yang sebenarnya pada sebuah kotak pratinjau saat Anda menggeser kendalinya. Lapisan kontak kedua yang lebih rapat bisa ditambahkan — pasangan yang dipakai perancang agar sebuah elemen tampak terangkat, bukan sekadar kabur — dan opsi ke dalam membalik bayangan ke sisi dalam untuk permukaan yang tampak tertekan.
Cara memakainya
- Atur pergeseran horizontal dan vertikal, kaburan, dan sebaran.
- Pilih warna dan opasitas, dan bila perlu aktifkan bayangan ke dalam atau lapisan kontak.
- Salin deklarasi box-shadow ke lembar gaya Anda.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Apakah ada yang diunggah?
- Tidak. Pratinjaunya adalah bayangan CSS yang dilukis peramban Anda, dan deklarasinya dirakit di dalam halaman.
- Apa fungsi sebaran?
- Sebaran memperbesar atau memperkecil bayangan sebelum dikaburkan. Sebaran negatif menariknya masuk, dan itulah cara menjaga bayangan lembut agar tidak menyembul dari sisi elemen.
- Kenapa memakai dua lapisan?
- Satu bayangan lebar dan lembut saja cenderung terlihat seperti kabut. Menambahkan lapisan kecil yang lebih gelap dekat elemen memberinya tepi kontak, dan keduanya bersama-sama terbaca sebagai ketinggian.