Generator CSS Box Shadow (dengan pratinjau langsung)
Enam preset bayangan umum (lembut, kartu, terangkat, cahaya, neumorfik, inset). Sesuaikan semua parameter dengan slider, lihat hasilnya secara langsung, dan salin CSS siap-pakai.
Cara kerjanya
Lima parameter bayangan
Offset X: perpindahan horizontal. Positif menggeser bayangan ke kanan, negatif ke kiri. Untuk pencahayaan matahari-dari-kiri-atas (asumsi UI khas), X positif kecil mensimulasikan cahaya dari kiri atas.
Offset Y: perpindahan vertikal. Positif menggeser bayangan ke bawah, mensimulasikan sumber cahaya di atas. Hampir semua bayangan UI menggunakan Y positif.
Radius blur: seberapa lembut tepi bayangan. 0 = tepi tajam (jarang). 8-30px khas untuk kartu dan tombol. Nilai lebih tinggi menciptakan bayangan lembut yang dreamy.
Spread: memperluas atau mengecilkan bayangan secara seragam. Nilai positif membuat bayangan lebih besar dari elemen; negatif mengecilkannya. Spread negatif dikombinasikan dengan offset menciptakan efek 'terangkat'.
Warna/opasitas: bayangan biasanya hitam dengan opasitas rendah (10-30%). Bayangan berwarna sedang tren tetapi lebih sulit digunakan dengan baik. Cocokkan rentang nilai latar belakang Anda โ bayangan terlalu gelap pada UI gelap menghilang, bayangan terlalu terang pada UI terang kurang kontras.
Bayangan inset
Bayangan inset digambar di dalam elemen alih-alih di luar. Digunakan untuk: state tombol ditekan, kolom input yang tenggelam, efek 'ditekan masuk 3D' neumorfik.
Bayangan inset menghormati border radius elemen dan mengabaikan overflow. Berguna untuk menambahkan kedalaman visual ke elemen UI datar tanpa mengubah tata letak sebenarnya.
Neumorfisme dan tren 'soft UI'
Neumorfisme (populer 2020-2022) menggunakan dua bayangan berlawanan โ satu terang, satu gelap โ untuk membuat elemen tampak diekstrusi dari latar belakang warna yang sama. Preset 'Neumorfik' kami menunjukkan bayangan gelap tunggal; untuk neumorfisme penuh, gabungkan dengan bayangan inset terang di sisi berlawanan: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'.
Catatan: neumorfisme murni memiliki masalah aksesibilitas โ kurangnya kontras membuat elemen sulit dibedakan. Desain modern menggunakannya secukupnya, sering dikombinasikan dengan bayangan tradisional.
Pertanyaan umum
โบBisakah saya menambahkan beberapa bayangan?
CSS mendukung beberapa bayangan yang dipisahkan koma: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)'. Alat kami menghasilkan satu bayangan sekaligus; gabungkan beberapa secara manual.
โบBagaimana cara membuat efek neumorfik?
Gabungkan bayangan gelap di kanan-bawah dengan bayangan terang di kiri-atas, keduanya inset atau keduanya outset. Contoh: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)'. Preset kami menampilkan setengah gelap; tambahkan bayangan terang secara manual.
โบApa perbedaan antara blur dan spread?
Blur melunakkan tepi bayangan (transparansi gradien). Spread mengubah ukuran keseluruhan bayangan (lebih besar atau lebih kecil dari elemen). Blur=20 spread=0 adalah cahaya lembut di ukuran elemen; blur=0 spread=20 adalah bayangan keras 20px lebih besar.
โบMengapa bayangan saya terlihat datar?
Kemungkinan opasitas terlalu rendah, tidak ada offset, atau warna bayangan terlalu dekat dengan latar belakang. Coba Y=8, blur=24, opacity=0,18 sebagai titik awal โ nilai tersebut terlihat pada sebagian besar latar belakang terang.
โบBisakah saya menggunakan ini untuk text-shadow?
Hampir โ text-shadow menggunakan sintaks yang sama minus 'spread' dan 'inset'. Sesuaikan secara manual setelah menyalin: ambil 'X Y blur color' (hapus spread dan inset).
โบApakah bayangan berperforma baik?
Box-shadow dipercepat GPU di browser modern. Banyak bayangan pada banyak elemen masih bisa memperlambat scrolling. Satu bayangan pada kartu dan tombol: tidak ada masalah.
โบHaruskah saya menggunakan bayangan atau border?
Keduanya memiliki kegunaan. Border lebih tajam dan lebih aksesibel. Bayangan terlihat lebih lembut/lebih tinggi. UI datar modern sering menggunakan keduanya: border tipis untuk ketajaman + bayangan lembut untuk elevasi.
โบApakah data meninggalkan browser saya?
Tidak. Semua pratinjau dan generasi CSS berjalan secara lokal; tidak ada yang dikirim ke server.
Alat terkait
Terakhir diperbarui: