Generator CSS Box Shadow

Generator box-shadow CSS dengan kontrol offset, blur, spread, warna, dan inset serta pratinjau bayangan langsung. Salin kode CSS siap pakai untuk elemen apa pun, gratis.

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);

Latar Belakang

Warna kotak

Drop Shadow

Inset

Offset X: 4px

Offset Y: 4px

Blur: 10px

Spread: 0px

Warna

Sematkan

<iframe src="https://devtools.patrache.studio/id/generators/css-box-shadow/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Generator CSS Box Shadow — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/id/generators/css-box-shadow/">Generator CSS Box Shadow</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Terakhir diperbarui: 2026 · Alat online gratis

Apa itu Generator CSS Box Shadow?

Generator box-shadow CSS dengan kontrol offset, blur, spread, warna, dan inset serta pratinjau bayangan langsung. Salin kode CSS siap pakai untuk elemen apa pun, gratis.

Cara Penggunaan

1
Pilih Preset— Mulai dengan cepat menggunakan tombol preset.
2
Sesuaikan Slider— Sesuaikan bayangan menggunakan slider offset X/Y, blur, dan spread.
3
Pratinjau— Periksa hasil secara real-time di pratinjau di atas.
4
Salin CSS— Gunakan tombol salin untuk mendapatkan CSS box-shadow.

Alat Terkait

Generator Gradien CSSGenerator gradien CSS visual untuk gradien linear, radial, dan conic: tambah color stop, atur sudut, lalu salin CSS-nya. Cocok untuk latar dan tombol, gratis di browser.

Generator CSS Border RadiusGenerator border-radius CSS dengan delapan pegangan sudut independen, slider, dan pratinjau langsung bentuk membulat. Salin kode CSS siap pakai untuk elemen apa pun, gratis.

Generator CSS FlexboxPlayground CSS Flexbox dengan editor visual untuk justify-content, align-items, flex-direction, dan wrap plus pratinjau tata letak langsung. Menghasilkan CSS Flexbox siap salin.

Konverter Kode WarnaKonverter warna online gratis yang menerjemahkan secara instan antara kode HEX, RGB, HSL, dan OKLCH serta menghitung rasio kontras WCAG.

Pertanyaan yang Sering Diajukan

Ya, gunakan tombol 'Tambah Bayangan' untuk menumpuk beberapa bayangan.

Ya, aktifkan kotak centang Inset pada setiap bayangan untuk membuat bayangan dalam.

Tersedia lima preset: Subtle, Medium, Large, Inset, dan Double.

Ya, Anda dapat langsung memasukkan rgba(0,0,0,0.15) di kolom input warna.

Tidak. Semua perhitungan dilakukan di browser.