Box Shadow Generator
Box Shadow Generator — berjalan di browser. Input tidak disimpan.
Generator box-shadow
Masukkan nilai, lalu tekan Hitung.
Pratinjau
Geser slider, CSS box-shadow langsung diperbarui.
Cara menggunakan
- Atur posisi bayangan dengan penggeser atau angka offset X dan offset Y. Default X 0, Y 8.
- Sesuaikan Blur dan Spread. Default blur adalah 24.
- Cocokkan warna bayangan dan penggeser opasitas. Persen opasitas ditampilkan di sampingnya.
- Nyalakan inset untuk bayangan dalam. Periksa segera di kotak pratinjau.
- Salin CSS di bawah ke stylesheet. Reset mengembalikan default.
Konsep utama
Generator box-shadow ini untuk menyesuaikan box-shadow pada kartu, tombol, dan modal. X dan Y adalah seberapa jauh bayangan duduk, blur adalah kelembutan tepi, dan spread adalah luas bayangan. Menggabungkan warna dan alfa memungkinkan bayangan berwarna merek, bukan abu-abu. CSS diperbarui segera setelah Anda menggeser.
Inset menaruh bayangan di dalam kotak, cocok untuk input yang tertekan atau naungan dalam. Pratinjau adalah persegi membulat putih untuk latar terang. Pembuatan hanya berjalan di browser. Layar ini membuat satu lapis; untuk bayangan bertumpuk, gabungkan nilai yang disalin dengan koma.
Contoh
Default Y 8, blur 24, dan opasitas 25% memberi bayangan lembut ke bawah. Menaikkan X dan Y ke 12 memperdalam bayangan kanan-bawah; menyalakan inset mengubah nilai yang sama menjadi naungan dalam. Tempel CSS yang disalin di dalam pemilih. Daftar kartu sering memakai satu bayangan untuk hierarki dan memberi modal blur lebih besar. Pada latar gelap Anda mungkin perlu alfa lebih tinggi daripada yang disarankan pratinjau putih. Menaruh deklarasi yang disalin di media query memungkinkan mengurangi spread di seluler. Saat mencoba input yang sama lagi, reset lalu tempel baru agar keluaran lama tidak tercampur. Di komputer bersama, kosongkan kolom setelah selesai. Menutup tab menghapus nilai; Anda tidak perlu permintaan hapus ke server.
Terkait: generator gradien · pemilih warna
Pertanyaan umum
Kapan memakai inset di CSS box-shadow?
Itu bayangan dalam. Pakai untuk naungan dalam kartu atau tampilan tombol tertekan.
Apakah nilai box-shadow dikirim ke server?
Tidak. Pratinjau dan string disusun hanya di browser.
Bisakah membuat bayangan bertumpuk?
Alat ini membuat satu lapis. Gabungkan deklarasi yang disalin dengan koma untuk beberapa lapis.
Ke mana opasitas masuk?
Menjadi alfa warna. Baca persen di samping penggeser.
Apa beda spread dan blur?
Blur melembutkan tepi; spread memperbesar atau memperkecil ukuran bayangan.
Bisakah mengubah latar pratinjau?
Pratinjau adalah kotak putih tetap. Periksa lagi pada latar halaman nyata Anda.
Terakhir ditinjau: 2026-09-04