Generator Box Shadow

Sesuaikan slider untuk membuat bayangan drop shadow atau inset shadow pada kotak pratinjau, lalu salin CSS box-shadow yang dihasilkan. Kontrol offset horizontal dan vertikal, radius blur, radius spread, warna, dan opasitas — tanpa perlu menghafal urutan argumen atau mengonversi warna ke rgba() secara manual.

Apa Itu Alat Ini?

box-shadow adalah properti CSS yang menggambar bayangan di belakang (atau di dalam) sebuah elemen. Jika ditulis manual, properti ini membutuhkan hingga lima nilai secara berurutan — offset horizontal, offset vertikal, radius blur, radius spread, dan warna — plus kata kunci inset opsional, semuanya mudah tertukar atau menjadi terlalu samar/terlalu berat pada percobaan pertama.

Alat ini mengubahnya menjadi manipulasi langsung: geser slider, lihat bayangan berubah di kotak pratinjau langsung, dan salin CSS yang tepat setelah terlihat pas. Pemilih warna plus slider opasitas menghasilkan nilai rgba() yang tepat secara otomatis, karena bayangan transparan umumnya terlihat lebih baik daripada yang sepenuhnya buram.

Mengapa Menggunakannya?

Pratinjau langsung diperbarui seketika saat Anda menyesuaikan kontrol apa pun — lihat bayangan yang tepat sebelum Anda memasukkannya ke kode.
Kontrol penuh atas offset-x, offset-y, blur, spread, warna, dan opasitas dalam satu tempat.
Satu klik menambahkan inset untuk tampilan tertekan/cekung alih-alih bayangan melayang.
Menghasilkan CSS siap tempel dengan warna sudah dikonversi ke rgba() pada opasitas pilihan Anda.
Berjalan sepenuhnya di peramban Anda — tidak ada yang Anda konfigurasi yang diunggah ke mana pun.
Gratis, tanpa pendaftaran, berfungsi di ponsel.

Cara Menggunakan

Atur offset-x dan offset-y untuk memposisikan bayangan — nilai positif mendorongnya ke kanan/bawah, nilai negatif ke kiri/atas.
Naikkan radius blur untuk melembutkan tepi bayangan; naikkan spread untuk membuat bayangan lebih besar dari elemennya sendiri.
Pilih warna dan sesuaikan opasitas — bayangan yang paling realistis menggunakan opasitas 15-40% alih-alih hitam pekat.
Centang 'inset' jika Anda ingin bayangan muncul di dalam border elemen alih-alih di belakangnya.
Salin CSS yang dihasilkan dan tempelkan ke stylesheet Anda.

Contoh

Input

Offset: 0px, 10px · Blur: 20px · Spread: 0px · Warna: hitam pada opasitas 35%

Output

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Bayangan lembut tepat di bawah elemen tanpa offset horizontal — salah satu gaya bayangan kartu/tombol yang paling umum.

Bayangan tunggal vs. bayangan berlapis

Alat ini membuat satu lapisan bayangan, yang mencakup sebagian besar kasus penggunaan dunia nyata — tombol, kartu, modal, dan dropdown hampir selalu menggunakan satu bayangan. CSS memang mendukung beberapa bayangan yang dipisahkan koma pada elemen yang sama untuk efek kedalaman yang lebih rumit (misalnya bayangan tipis dan gelap dilapis di bawah bayangan lembut dan lebar), tapi itu penyempurnaan yang bisa Anda tambahkan secara manual: buat satu bayangan di sini, lalu duplikasi barisnya, sesuaikan set nilai kedua, dan gabungkan dengan koma.

Pola box-shadow umum

Efek angkat kartu yang halus: offset kecil (0-4px), blur sedang (8-16px), opasitas hitam 10-20%.
Modal/dropdown terangkat: offset lebih besar (4-10px) dan blur (20-30px), opasitas 20-35% untuk kesan melayang yang lebih kuat.
Tombol tertekan/inset: centang inset, gunakan offset yang terasa sedikit negatif dan blur sedang agar bayangan terbaca sebagai lekukan alih-alih terangkat.
Cahaya berwarna: pilih warna merek alih-alih hitam, naikkan opasitas ke 40-60%, dan tambah sedikit spread untuk efek cahaya lembut di sekitar tombol.
Bayangan tajam/keras: atur blur ke 0 dan spread ke 0 untuk siluet padat dengan offset alih-alih bayangan lembut.

Memadukan dengan sudut membulat

Bayangan dan sudut membulat terus-menerus digunakan bersama — kartu, tombol, dan modal hampir selalu menggabungkan keduanya. Gunakan Generator Border Radius untuk membulatkan sudut elemen yang sama, lalu terapkan kedua deklarasi CSS yang dihasilkan bersamaan.

→ Generator Border Radius · Konverter Satuan

Pertanyaan yang Sering Diajukan

Apa perbedaan antara blur dan spread?

Radius blur melembutkan tepi bayangan — nilai yang lebih tinggi membuatnya memudar secara lebih bertahap. Radius spread mengubah ukuran bayangan sebelum di-blur — spread positif membuat bayangan lebih besar dari elemen di semua sisi, spread negatif mengecilkannya. Kebanyakan bayangan sehari-hari menggunakan blur dengan spread dibiarkan di 0.

Mengapa menggunakan rgba() alih-alih warna hex biasa untuk bayangan?

Bayangan yang sepenuhnya buram terlihat keras dan tidak realistis — bayangan sungguhan selalu agak transparan, membiarkan apa pun di belakangnya sedikit terlihat. rgba() memungkinkan Anda mengatur transparansi itu secara langsung, itulah sebabnya alat ini selalu menghasilkan warna dengan nilai alpha alih-alih hex padat.

Apa fungsi kata kunci inset?

Tanpa inset, bayangan digambar di luar border elemen, seolah elemen tersebut melayang di atas halaman. Dengan inset, bayangan digambar di dalam border, membuat elemen terlihat tertekan atau cekung ke dalam — umum digunakan untuk status tombol aktif/tertekan atau kolom input.

Bisakah saya menumpuk lebih dari satu bayangan pada elemen yang sama?

Bisa — box-shadow CSS menerima daftar yang dipisahkan koma, dan peramban merendernya sesuai urutan yang diberikan (bayangan pertama berada paling atas). Teknik umum melapisi bayangan yang tipis dan lebih gelap dengan bayangan yang lebih lebar dan lebih lembut untuk kedalaman yang lebih realistis daripada salah satunya saja.

Apakah box-shadow memengaruhi tata letak atau hanya tampilan?

Hanya tampilan — box-shadow tidak pernah memengaruhi ukuran elemen atau posisi elemen di sekitarnya, bahkan dengan nilai blur atau spread yang besar. Jika bayangan terlihat terpotong secara visual, periksa overflow: hidden pada elemen induk alih-alih nilai bayangan itu sendiri.