Generator Bayangan CSS (box-shadow, text-shadow)

Mengatur box-shadow, text-shadow, dan filter: drop-shadow() dengan slider, menumpuk beberapa lapisan bayangan, dan memberikan CSS-nya kepada Anda. Gunakan untuk menentukan kedalaman kartu atau tombol, tampilan tertekan dengan inset, atau garis tepi teks sambil melihat pratinjau langsung.

Cara pakai

1. Di "Jenis", pilih box-shadow, text-shadow, atau filter: drop-shadow.
2. Pada setiap lapisan di "Lapisan bayangan", atur "Offset X", "Offset Y", "Blur", "Sebaran" (hanya box-shadow), "Warna bayangan", dan "Opasitas". Nyalakan "Ke dalam" untuk bayangan bagian dalam.
3. Tekan "Tambah lapisan" atau "Gandakan" untuk menambah lapisan dan gunakan panah untuk mengubah urutannya. Menghilangkan centang pada sebuah lapisan akan mengeluarkannya untuk sementara.
4. Pada pratinjau di sebelah kiri, atur "Latar belakang", "Warna kartu", "Radius sudut", dan "Ukuran kartu" agar mirip dengan layar Anda yang sebenarnya.
5. Jika ingin, pilih titik awal di "Preset", lalu tekan "Salin" di sebelah CSS.

Cara kerja

• Satu lapisan box-shadow ditulis sebagai "[inset] x y blur sebaran warna". Sebaran positif memperbesar bayangan, sebaran negatif memperkecilnya. text-shadow tidak memiliki sebaran dan inset.
• filter: drop-shadow() mengikuti bentuk yang terlihat (ikon PNG, SVG), bukan kotaknya, dan beberapa fungsi yang ditulis berurutan akan bertumpuk.
• Warna ditulis sebagai HEX jika pekat dan sebagai rgb(r g b / a) jika tidak. Kedalaman yang alami biasanya diperoleh dari dua atau tiga lapisan beropasitas rendah dengan blur yang semakin besar.
• Lapisan dan pengaturan pratinjau disimpan di browser ini.

Pertanyaan umum

Bagaimana urutan nilai dalam box-shadow?

Offset X, offset Y, blur, sebaran, warna, dengan inset ditempatkan paling depan untuk bayangan bagian dalam. Contoh: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).

Bagaimana cara memberi kartu bayangan yang alami?

Tumpuk dua atau tiga lapisan dengan opasitas 10 hingga 20 persen dan naikkan offset vertikal serta blur secara bertahap. Preset "Elevasi sedang" dan "Lembut, 5 lapisan" dibuat dengan cara itu.

Bisakah text-shadow membuat garis tepi teks?

Bisa. Empat bayangan tanpa blur ke empat arah (1px 1px, -1px -1px, 1px -1px, -1px 1px) membentuk garis tepi yang tipis. Preset "Garis tepi teks" melakukan persis itu.

Apa perbedaan box-shadow dan filter drop-shadow?

box-shadow memberi bayangan pada kotak persegi elemen; filter drop-shadow memberi bayangan pada bentuk yang terlihat. Untuk ikon atau SVG di atas latar transparan, drop-shadow adalah pilihan yang tepat.