Generator Bayangan CSS

Panduan bayangan CSS

Bayangan yang wajar perlu dilihat dari posisi, blur, spread, dan transparansi sekaligus

Generator Bayangan CSS membantu kamu mengatur satu atau beberapa layer bayangan sambil melihat pratinjau dan aturan box-shadow yang akan disalin. Offset horizontal dan vertikal menentukan arah, blur dan spread membentuk tepi, sedangkan transparansi menentukan seberapa berat bayangan terasa. Tidak ada tombol hitung terpisah; kode berubah saat kontrol digeser.

Atur nilai bayangan dulu, lalu cek bentuk elemen target

Alurnya adalah penyuntingan langsung. Pisahkan nilai bayangan yang akan disalin ke CSS dari pengaturan elemen pratinjau, supaya jelas mana yang masuk ke kode dan mana yang hanya untuk melihat tampilan.

Buat layer di tab Bayangan. Atur offset horizontal, offset vertikal, blur, spread, warna, transparansi, dan bayangan dalam untuk setiap layer.
Tambah layer hanya kalau memang membantu. Beberapa layer akan menjadi satu nilai box-shadow yang dipisahkan koma. Hapus layer yang tidak memberi efek jelas.
Gunakan tab Pratinjau untuk mendekati elemen asli. Ganti kotak, kotak membulat, lingkaran, tombol, atau kartu agar pratinjau mirip dengan elemen yang akan diberi gaya.
Mulai dari preset, lalu rapikan. Soft, berlapis, neon, dan inset hanya titik awal. Cek blok kode CSS final sebelum ditempel ke stylesheet.

Offset menggeser bayangan; blur dan spread mengubah teksturnya

Bagian box-shadow terdengar mirip, tetapi tugasnya berbeda. Kalau blur dan spread dianggap satu hal, bayangan bisa terlihat terlalu melebar atau terlalu keras.

Offset horizontal dan vertikal

Nilai positif menggeser bayangan ke kanan dan bawah. Nilai negatif menggesernya ke kiri dan atas. Anggap saja sebagai arah datangnya cahaya.

Blur

Blur melembutkan tepi bayangan. Semakin besar nilainya, bayangan biasanya makin lebar dan makin ringan.

Spread

Spread memperbesar atau memperkecil area bayangan sebelum blur diterapkan. Spread negatif kecil membantu menjaga bayangan kartu tetap ringan.

Warna dan transparansi

Alat ini menggabungkan warna dan transparansi menjadi rgba(). Bayangan hitam dengan 0.2 terasa sangat berbeda dari warna yang sama dengan 0.5.

Bayangan dalam

Saat inset aktif, bayangan digambar di dalam elemen. Cocok untuk input, tombol yang tampak ditekan, atau kartu yang terlihat masuk ke dalam.

Bentuk dan ukuran pratinjau

Bentuk dan ukuran hanya mengubah elemen contoh. Nilai itu tidak ikut masuk ke box-shadow yang disalin.

Kode yang disalin mengikuti urutan nilai CSS box-shadow

Output berisi properti CSS dengan inset opsional, offset horizontal, offset vertikal, radius blur, radius spread, dan warna. Jika ada beberapa layer, semuanya digabung dengan koma dan dibaca browser sebagai satu deklarasi box-shadow.

Urutan dasaroffset-x offset-y blur spread color

Bayangan dalaminset 0px 4px 12px -4px rgba(…)

Beberapa layershadow A, shadow B, shadow C

Ukuran pratinjauPengaturan visual, bukan CSS yang disalin

Referensi MDN box-shadowGunakan untuk mengecek offset, blur, spread, inset, dan sintaks beberapa bayangan.CSS Borders and Box DecorationsGunakan saat perlu definisi formal CSS untuk box-shadow.

Contoh inset paling mudah dibaca sebagai satu baris CSS

Misalnya inset aktif, offset horizontal 12px, offset vertikal 8px, blur 18px, spread -2px, warna #336699, dan transparansi 0.35 akan menghasilkan nilai seperti di bawah. Spread negatif mencegah bayangan melebar berlebihan, sementara inset membuat kartu terasa ditekan ke dalam.

Offset12px / 8px

Blur · spread18px / -2px

Warnargba(51, 102, 153, 0.35)

Hasilinset 12px 8px 18px -2px …

Bayangan tidak mengambil ruang layout

box-shadow bisa terlihat keluar dari elemen, tetapi tidak mendorong konten di sekitarnya. Jika elemen induk memakai overflow: hidden atau kartu terlalu dekat dengan tepi layar, bayangan bisa terpotong.

Cek latar asli sebelum menyalin

Bayangan bisa membuat kartu lebih jelas, tetapi bayangan yang terlalu berat juga bisa membuat halaman terlihat kotor. Nilai CSS yang sama bisa terasa berbeda di permukaan terang dan gelap.

Mulai dengan blur lebih besar dan transparansi lebih rendah. Bayangan yang lebar dan tipis sering terlihat lebih wajar daripada bayangan yang gelap dan rapat.
Ubah spread sedikit demi sedikit. Spread positif besar bisa terlihat seperti border. Spread negatif besar bisa membuat bayangan hampir hilang.
Gunakan layer dengan alasan jelas. Dua atau tiga layer bisa memberi kedalaman, tetapi terlalu banyak layer membuat kode sulit dirawat.
Sesuaikan ulang untuk permukaan gelap. Bayangan hitam yang bagus di kartu terang bisa terlihat seperti noda di latar gelap.

Pertanyaan umum

Apakah mengubah ukuran pratinjau mengubah kode CSS?

Tidak. Ukuran dan bentuk pratinjau hanya mengubah elemen contoh untuk mengecek efek. Kode yang disalin berisi offset, blur, spread, warna, dan status inset.

Bagaimana beberapa bayangan diterapkan?

Alat ini menggabungkan layer dengan koma. CSS menerapkannya sebagai satu daftar bayangan, jadi cek pratinjau dan kode bersama-sama saat daftarnya makin panjang.

Apa bedanya blur dan spread?

Blur melembutkan tepi bayangan. Spread mengubah ukuran area bayangan. Untuk bayangan kartu yang lembut, atur blur dulu dan jaga spread tetap kecil.

Kapan sebaiknya memakai inset?

Gunakan inset saat elemen ingin terlihat masuk ke dalam, seperti input, kartu cekung, atau tombol yang ditekan. Rasanya berlawanan dengan bayangan kartu yang mengambang.