LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

Pembuat Box Shadow Berlapis CSS

Ide kami sendiriAlatnya tidak ada?

Rancang box-shadow berlapis dari satu set kontrol

Atur offset, blur, spread, warna, dan jumlah lapisan, lihat pratinjau langsung, dan salin deklarasi box-shadow multi-lapis yang dibangun seperti cara desainer menumpuk bayangan untuk kedalaman nyata. Semuanya dirender di peramban Anda sendiri.

Keluaran
box-shadow:
  0px 4px 6px -1px rgba(23, 33, 28, 0.3),
  0px 8px 12px -2px rgba(23, 33, 28, 0.26),
  0px 12px 18px -2px rgba(23, 33, 28, 0.22),
  0px 16px 24px -3px rgba(23, 33, 28, 0.18),
  0px 20px 30px -4px rgba(23, 33, 28, 0.14);

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Satu lapisan box-shadow saja cenderung terlihat seperti kabut datar; elevasi nyata muncul dari menumpuk beberapa lapisan yang mengecil dan memudar semakin dekat ke elemen, seperti cahaya ambient yang meredup. Alat ini mengambil satu set kontrol offset, blur, spread, dan warna plus jumlah lapisan, lalu menurunkan sejumlah lapisan yang semakin rapat dan semakin pekat secara otomatis, sehingga Anda mendapat bayangan bertumpuk yang meyakinkan tanpa menyetel masing-masing secara manual.

Cara memakainya

  1. Pilih berapa banyak lapisan yang akan dihasilkan.
  2. Atur offset, blur, spread, warna, dan opasitas untuk lapisan dasar.
  3. Salin deklarasi box-shadow multi-lapis yang dihasilkan.

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. Pratinjau adalah bayangan CSS yang digambar oleh peramban Anda dan deklarasinya dirakit di halaman.
Bagaimana masing-masing lapisan diturunkan?
Setiap lapisan menyekalakan offset, blur, dan spread mengecil ke arah elemen serta meningkatkan opasitas seiring makin dekat, pola mengecil-dan-memudar yang sama seperti sistem elevasi yang dibuat manual.
Mengapa jumlah lapisan dibatasi?
Melewati lima atau enam lapisan, perbedaan visualnya jadi tidak signifikan sementara CSS-nya terus bertambah, jadi kontrolnya dibatasi agar hasilnya tetap mudah dibaca dan ditempel.

Kembali ke semua alat