Lompat ke konten
SPCXTools

Generator Box Shadow

Atur bayangan lembut, tajam, berlapis, atau inset dengan pratinjau langsung dan salin CSS-nya.

Berjalan secara lokal — file tidak pernah meninggalkan perangkat Anda

Memuat alat…

Cara menggunakan Generator Box Shadow

  1. 1Mulai dari preset seperti Lembut, Berlapis, atau Inset, atau atur bayangan bawaan.
  2. 2Geser slider untuk offset horizontal dan vertikal, blur, spread, serta opasitas, lalu pilih warna bayangan.
  3. 3Tambahkan lebih banyak lapisan untuk kedalaman yang realistis, dan atur radius sudut serta warna pratinjau.
  4. 4Salin CSS dan tempelkan ke stylesheet Anda.

Desain CSS shadow secara visual

Shadow memberikan kedalaman pada antarmuka: membuat elemen kartu tampak menonjol, menunjukkan tombol yang sedang ditekan, dan memisahkan dialog dari konten latar. Properti CSS box-shadow sangat canggih, tapi kelima angkanya sulit diatur tanpa melihat hasilnya secara langsung. Generator ini menyediakan slider dan pratinjau langsung (live preview), memungkinkan Anda menumpuk beberapa shadow untuk hasil yang natural, dan menghasilkan kode CSS bersih yang siap disalin ke proyek Anda.

Fitur

  • Kontrol Offset, blur, spread, warna, dan opasitas dengan pratinjau instan.
  • Hingga lima layer yang digabungkan dalam satu deklarasi box-shadow.
  • Inset shadow untuk efek ditekan dan cekung.
  • Corner radius dan warna pratinjau untuk disesuaikan dengan desain Anda.
  • Preset untuk shadow soft, medium, hard, layered, inset, dan glow.
  • CSS siap salin dengan warna dalam format rgba().

Contoh

Shadow berlapis yang terlihat natural pada latar belakang terang:

.card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
    0px 4px 8px 0px rgba(0, 0, 0, 0.07),
    0px 16px 32px 0px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

Tips desain shadow

Tujuan Pengaturan yang disarankan
Efek kartu halus di latar putih y 4, blur 12, opasitas 8%
Dropdown atau dialog melayang 2–3 layer, y hingga 24, blur hingga 48, opasitas masing-masing 7–12%
Tampilan "flat" retro x 6, y 6, blur 0, opasitas 100%
Efek fokus atau glow x 0, y 0, blur 16–24, spread 2–4, warna brand
Kolom input ditekan inset, y 2, blur 6, opasitas 25–30%

Pastikan sumber cahaya tetap konsisten: jika shadow jatuh ke bawah pada satu komponen, shadow juga harus jatuh ke bawah di semua komponen lainnya.

Alat terkait

Buat latar belakang untuk kartu Anda dengan Generator Gradien CSS, konversi warna antara HEX, RGB, dan HSL dengan Konverter Warna, atau ambil warna dari screenshot dengan Pemilih Warna Gambar.

Pertanyaan yang sering diajukan

Apa arti dari keempat nilai box-shadow?
Secara berurutan, nilainya adalah offset horizontal (positif menggeser bayangan ke kanan), offset vertikal (positif menggesernya ke bawah), blur radius (semakin besar semakin lembut), dan spread (positif membuat bayangan lebih besar dari elemen, negatif membuatnya lebih kecil). Warna diletakkan paling akhir.
Mengapa menggunakan beberapa lapis bayangan?
Bayangan asli tampak tajam dan gelap di dekat objek, serta lembut dan memudar saat menjauh. Menumpuk dua atau tiga bayangan dengan offset dan blur yang meningkat namun opacity rendah akan meniru efek ini, sehingga terlihat jauh lebih natural daripada satu bayangan tebal.
Apa itu inset shadow?
Inset shadow digambar di dalam elemen, bukan di luar, sehingga membuatnya tampak seperti ditekan ke dalam. Efek ini sering digunakan untuk kolom input, tombol yang ditekan, dan elemen well.
Mengapa bayangan saya terlihat abu-abu pada background berwarna?
Bayangan hitam terlihat kusam pada permukaan berwarna. Cobalah gunakan warna background yang lebih gelap untuk bayangan tersebut daripada warna hitam pekat — hasilnya akan terlihat lebih kaya dan natural.
Apakah box-shadow memengaruhi performa?
Beberapa bayangan tidak membebani performa. Namun, blur radius yang sangat besar pada banyak elemen, atau menganimasikan box-shadow saat di-scroll, dapat memperlambat rendering pada ponsel berspesifikasi rendah. Untuk menganimasikan bayangan, sebaiknya ubah opacity pada pseudo-element yang memiliki bayangan tersebut.

Alat terkait

Generator Gradien CSSDesain background gradien secara visual dan salin kode CSS-nya — linear, radial, atau conic.Konverter WarnaKonversi warna apa pun antara HEX, RGB, HSL, HSV, dan CMYK, serta cek kontrasnya.Color Picker GambarKlik di mana saja pada gambar untuk mendapatkan warna HEX, RGB, dan HSL yang akurat — beserta palet warna utamanya.Simulator Buta WarnaLihat pratinjau gambar Anda dari sudut pandang penderita defisiensi penglihatan warna untuk memastikan desain Anda mudah diakses.Cek Kontras WarnaCek apakah teks Anda cukup mudah dibaca — dan dapatkan warna terdekat yang memenuhi standar WCAG.Generator Palet WarnaPilih satu warna dan dapatkan palet lima warna yang harmonis berdasarkan teori warna.