onul.works

Generator Box Shadow

Buat nilai CSS box-shadow dengan pratinjau visual langsung.

⌘ Berjalan di browser ◴ Data tidak disimpan ⌁ Gratis

Penjelasan konsep

CSS box-shadow siap pakai untuk kartu, tombol, dan modal

Atur kedalaman komponen dan batas visual dengan cepat lewat offset-x, offset-y, blur, spread, color, dan inset.

Box-shadow memungkinkan Anda mengatur kedalaman bayangan dan pemisahan layer UI dengan posisi offset, blur, spread, color, serta opsi inset.

Alat ini membantu menghasilkan nilai CSS bayangan lalu memeriksanya pada latar terang/gelap sebelum dipasang ke card, tombol, dan modal để memastikan visibilitas.

Skenario yang cocok

Cocok untuk hover card, nhấn mạnh tombol, overlay modal, dan notifikasi toast khi cần mengatur hierarki visual.

Panduan parameter

offset x/y menentukan arah, blur menentukan kelembutan, spread menentukan lebar rambatan, color menentukan tone, dan inset memberikan nuansa dalam.

Checklist sebelum dipakai

Cek kecocokan dengan warna latar halaman nyata, dark mode, kontras teks tombol, serta token sistem desain seperti radius, spacing, dan tone bayangan.

Output ditujukan untuk pratinjau cepat và copy. Validasi final di UI nyata karena hasil render có thể khác theo mode, latar, dan token.

CSS box-shadow yang dibuat

Cara menggunakan

  1. 1 Tambahkan lapisan shadow dan atur nilai offset X/Y, blur, serta spread.
  2. 2 Ubah warna dan opsi inset sambil memeriksa pratinjau.
  3. 3 Salin CSS box-shadow yang dihasilkan ke stylesheet Anda.

Contoh penggunaan umum

  • Membuat CSS box-shadow untuk card
  • Mengatur beberapa lapisan shadow
  • Menyalin nilai inset shadow

Pertanyaan umum

Nilai shadow apa saja yang bisa diatur?

Anda dapat mengatur offset X/Y, blur, spread, warna, opasitas, dan inset, serta menambah atau menghapus beberapa lapisan shadow.

Bisakah CSS box-shadow hasilnya langsung digunakan?

Bisa. CSS box-shadow yang selesai muncul di bawah pratinjau, dan tombol salin menyalinnya ke clipboard.

Apakah pratinjau berubah saat nilai diubah?

Saat slider atau nilai warna diubah, kotak pratinjau dan output CSS diperbarui langsung.

Alur kerja terkait

Generator Box ShadowAtur kedalaman bayangan untuk card, tombol, atau panel agar hierarki UI mudah terbaca. → Generator BarcodeJika label atau panel berisi pengenal, cek bobot visualnya terhadap kedalaman shadow yang dipilih. → Pemilih WarnaCocokkan warna latar dan aksen agar shadow terasa natural pada card dan tombol.