Generator box-shadow CSS
Geser penggeser atau pilih preset — lihat bayangannya pada kartu langsung dan salin CSS box-shadow dengan satu klik.
Preset
Lapisan
0px
8px
24px
-8px
#000000
15%
Cara menggunakan
- Bayangan lembut sudah ada di kartu — geser penggeser mana pun (offset X/Y, blur, sebaran), pilih warna dan opasitas, atau centang Inset untuk bayangan dalam. Semuanya diperbarui langsung, tanpa tombol yang perlu ditekan.
- Klik chip preset (Mengambang lembut, Angkat kuat, Inset, Cahaya neon, Ganda, Neumorfisme) untuk memuat tampilan siap pakai seketika.
- Tambahkan lapisan dengan “+” untuk menumpuk bayangan; setiap lapisan diedit sendiri. Salin deklarasi box-shadow lengkap dengan satu klik.
Contoh
Preset
Mengambang lembut
CSS box-shadow
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Salin langsung ke selektor mana pun, mis. .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. Preset “Ganda” menghasilkan dua bayangan yang dipisahkan koma; “Neumorfisme” perlu latar terang agar terbaca.
Cakupan, batasan, dan pertanyaan umum
- Hanya box-shadow: tanpa filter drop-shadow(), tanpa text-shadow, dan CSS tidak punya bayangan gradien — semuanya di luar cakupan.
- Warna berasal dari pemilih plus penggeser opasitas; string warna CSS yang ditempel tidak diurai, jadi tidak ada yang bisa salah ketik atau salah baca.
- Neumorfisme bergantung pada permukaan terang — di latar yang sangat gelap efeknya bisa tak terlihat. Itu sifat gayanya, bukan bug.
- Tidak ada yang disimpan atau dibagikan lewat parameter di tautan: muat ulang dan Anda kembali ke Mengambang lembut bawaan. Semuanya berjalan di peramban Anda.
Alat terkait
Bila perlu melangkah lebih jauh dengan warna atau bayangan.