DevToolPal
ID

Generator Box Shadow CSS

Rancang bayangan CSS secara visual: tumpuk beberapa lapisan, atur offset, blur, spread, warna, dan inset, dengan pratinjau langsung, preset, serta CSS siap salin.

Berjalan lokal, tidak pernah diunggah

Lapisan bayangan

Tidak ada bayangan. Tambahkan lapisan atau pilih preset.

Pratinjau

Warna kotak
Latar belakang

CSS

Preset
CSS box-shadow
 
 
 
 
 
Fungsi alat ini


Generator box shadow memungkinkan Anda merancang bayangan CSS secara visual lalu menyalin deklarasi box-shadow jadinya. Tumpuk lapisan sebanyak yang diperlukan, atur offset, blur, spread, warna, dan opasitas tiap lapisan, ubah menjadi bayangan dalam, dan pratinjau langsung diperbarui. Anda juga bisa menempelkan nilai box-shadow yang sudah ada untuk diedit secara visual. Semuanya berjalan di browser Anda.


Cara pakai


    

  1. Mulai dari preset atau gunakan bayangan contoh.
    2. 

  2. Pilih lapisan dengan tombol Lapisan, atau gunakan + Tambah lapisan untuk menumpuk satu lagi di atasnya.
    3. 

  3. Geser Offset horizontal, Offset vertikal, Blur, dan Spread, pilih Warna, lalu turunkan Opasitas agar lebih lembut. Aktifkan Bayangan dalam untuk bayangan ke arah dalam.
    4. 

  4. Sesuaikan Warna kotak, Latar belakang, dan Radius sudut pratinjau dengan halaman Anda. Pengaturan ini hanya memengaruhi pratinjau.
    5. 

  5. Salin kode dari kartu CSS.
    6. 



Kotak CSS box-shadow di bagian bawah bisa diedit: tempel bayangan dari stylesheet atau alat desain, dan kontrol akan membacanya. Panjang dalam rem atau em dikonversi ke px dengan acuan 16px.


Contoh


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Tips bayangan yang alami


    

  • Opasitas rendah. Hitam 5–25% terlihat realistis; bayangan gelap pekat terasa berat.
    • 

  • Spread negatif mencegah blur besar meluber ke samping — trik di balik kebanyakan bayangan “kartu”.
    • 

  • Beri warna pada bayangan. Bayangan dengan sedikit rona latar atau warna merek terlihat lebih kaya daripada abu-abu murni.
    • 

  • Cahaya dari satu arah. Jaga offset vertikal tetap positif di semua lapisan agar semua bayangan sepakat soal arah cahaya.
    • 

  • Performa. Blur besar pada banyak elemen bisa memperlambat scroll di ponsel kelas bawah; animasikan opacity atau transform, bukan bayangannya.
    • 

 
  
 
FAQ
 
 
  › Apa arti empat angka pada box-shadow?  
Berurutan: offset horizontal, offset vertikal, radius blur, dan radius spread. Offset positif menggeser bayangan ke kanan dan ke bawah. Blur melembutkan tepi dan tidak boleh negatif. Spread memperbesar (positif) atau memperkecil (negatif) bayangan sebelum blur diterapkan.
 
  › Mengapa memakai beberapa lapisan bayangan?  
Bayangan nyata tajam di dekat benda dan memudar di kejauhan. Menumpuk dua lapisan atau lebih, misalnya satu kecil dan tajam serta satu besar dan lembut, terlihat jauh lebih alami daripada satu blur gelap. Begitulah sebagian besar design system membangun tingkat elevasinya.
 
  › Apa fungsi inset?  
inset menggambar bayangan di dalam kotak, bukan di luar, seolah elemen ditekan ke dalam. Ini dipakai untuk kolom input, tombol yang ditekan, dan cahaya dalam. Anda bisa mencampur lapisan inset dan luar dalam satu box-shadow.
 
  › Apakah box-shadow mengikuti border-radius?  
Ya. Bayangan mengikuti bentuk elemen, termasuk sudut membulat, sehingga pratinjau memakai radius sudut yang Anda atur. Bayangan tidak mengikuti bagian transparan gambar; untuk itu gunakan filter CSS drop-shadow().