Lewati ke konten
ID

Generator box-shadow CSS

Buat bayangan CSS realistis berlapis: offset, blur, sebaran, warna, inset. 10 preset termasuk neumorfisme. Kode CSS dan Tailwind.

  • Gratis
  • Tanpa daftar
  • Tanpa unggah file
  • Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Susun nilai box-shadow seperti desainer: hingga 8 lapisan dengan offset, blur, sebaran, warna, dan opasitas, bayangan dalam, dan 10 preset (lembut, melayang, neumorfisme, cahaya, garis tepi…). Atur juga radius dan warna pratinjau, lalu salin kode CSS atau Tailwind.

Kapan menggunakannya

Kartu dan tombol

Bayangan lembut dua lapis mengangkat kartu dari latar tanpa terlihat berat; bayangan lebih dalam saat hover membuatnya tampak naik.

Kolom dan area cekung

Bayangan dalam (inset) membuat kolom input tampak terpahat di halaman.

Efek cahaya

Bayangan berwarna tanpa offset menciptakan pendar cahaya, berguna untuk menonjolkan elemen aktif.

Cara menggunakan

  1. Mulai dari preset (lembut, dalam, neumorfisme…).
  2. Atur setiap lapisan: offset, blur, sebaran, warna.
  3. Salin kode CSS atau Tailwind.

Cara kerjanya

Setiap lapisan menjadi satu nilai box-shadow: “inset” opsional, offset horizontal dan vertikal, blur, sebaran, dan warna rgba(). Lapisan dipisahkan koma; yang pertama digambar paling atas.

Pratinjau menerapkan nilai yang disalin persis. Versi Tailwind memakai nilai arbitrer shadow-[…] di mana spasi menjadi garis bawah.

Tips untuk hasil terbaik

  • Buat bayangan samar (opasitas 5 hingga 20%): bayangan yang terlalu gelap terlihat kotor.
  • Gunakan warna bayangan berwarna (biru tua, bukan hitam) untuk hasil yang lebih kaya.
  • Pertahankan arah cahaya yang sama untuk semua bayangan di satu halaman.
  • Untuk neumorfisme, elemen dan latar harus berwarna sama.

Masalah umum dan solusinya

Bayangan terpotong

Induk dengan overflow: hidden memotong bayangan yang meluber. Tambahkan padding pada induknya.

Bayangan tidak mengikuti bentuk gambar saya

box-shadow mengikuti persegi panjang. Untuk gambar yang dipotong, gunakan filter: drop-shadow().

Neumorfisme kurang kontras

Itu batas gaya ini: pakai untuk elemen dekoratif dan gunakan garis tepi atau teks kontras untuk yang penting.

Pertanyaan umum

Mengapa beberapa lapisan bayangan?

Di dunia nyata, bayangan tajam di dekat objek dan menyebar di kejauhan. Menumpuk dua atau tiga bayangan dengan blur berbeda tampak jauh lebih alami daripada satu.

Apa fungsi sebaran (spread)?

Memperbesar atau memperkecil bayangan sebelum di-blur. Sebaran negatif menjaga bayangan tetap di bawah elemen, untuk efek kartu melayang.

Apa itu neumorfisme?

Gaya di mana elemen tampak dipahat dari latar: bayangan gelap di satu sisi, bayangan terang di sisi lain, di atas latar berwarna sama dengan elemen.

box-shadow atau drop-shadow?

box-shadow mengikuti persegi panjang elemen (dengan radiusnya). filter: drop-shadow() mengikuti bentuk asli PNG transparan atau clip-path.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.