Generator CSS Box Shadow
Buat box-shadow dengan menggeser slider dan melihat hasilnya pada sebuah kartu. Tumpuk hingga enam lapisan untuk bayangan yang lebih lembut dan realistis, gunakan inset untuk efek tertekan, dan mulai dari preset seperti lembut, melayang, glow, atau neumorphism. Salin CSS dengan satu klik.
Cara memakainya
- Pilih preset atau atur offset, blur, spread, warna, dan opasitas bayangan.
- Tambahkan lapisan dengan + dan pilih tiap lapisan untuk mengeditnya; ubah latar belakang, warna kotak, dan radius sudut agar sesuai desain Anda.
- Salin CSS dan tempel ke dalam aturan elemen.
Pertanyaan yang sering diajukan
Apa fungsi blur dan spread?
Blur membuat tepi bayangan lebih lembut; nol berarti tepi tajam. Spread memperbesar bayangan ke segala arah sebelum diburamkan, dan spread negatif memperkecilnya, yang membantu bayangan buram besar tetap berada di bawah elemen.
Mengapa memakai beberapa lapisan bayangan?
Bayangan nyata lebih gelap di dekat benda dan memudar makin jauh. Menggabungkan bayangan kecil yang tajam dengan yang lebih besar dan lembut meniru hal itu dan tampak lebih alami daripada satu bayangan. Lapisan pertama dalam daftar digambar paling atas.
Apakah box-shadow memperlambat halaman?
Tidak pada penggunaan normal. Blur yang sangat besar pada banyak elemen, atau menganimasikan bayangan itu sendiri, dapat membebani performa di ponsel lambat; untuk animasi, ubah opasitas pseudo-elemen yang memiliki bayangan.
🏷️ Generator Meta Tag
🖼️ Generator Open Graph
🔗 Pembuat Tautan UTM
🌈 Generator Gradien CSS