Rancang box-shadow CSS berlapis dengan pratinjau langsung, lalu salin CSS yang siap produksi.
Terakhir diperbarui
Coddy mengajarimu dengan menulis kode sungguhan di browser: pelajaran interaktif, umpan balik instan, dan bantuan AI saat kamu buntu.
box-shadow adalah property CSS yang menambahkan bayangan jatuh, cahaya, dan cekungan inset ke elemen apa pun. Inilah cara paling ampuh untuk memberi desain datar kesan *ketinggian*: kartu terangkat dari halaman, modal melayang di atas konten, tombol terasa bisa ditekan.
Kuncinya, bayangan yang *bagus* jarang hanya satu lapisan. Bayangan di dunia nyata lebih lembut dan punya pantulan cahaya sekitar. Kebanyakan design system (Material, iOS, Tailwind) menumpuk 2 sampai 3 deklarasi box-shadow dengan offset dan opasitas yang berbeda. Menulisnya dengan tangan itu merepotkan; generator membuatmu bisa mengatur setiap lapisan secara visual dan melihat hasil gabungannya secara live.
Generator Coddy mendukung lapisan tanpa batas, bayangan *luar* maupun *inset*, warna dan opasitas per lapisan, serta preset untuk pola yang paling umum: kartu halus, bayangan tajam, cahaya warna merek, cekungan inset, dan permukaan neumorphic. Salin CSS-nya lalu tempel langsung ke stylesheet-mu, tanpa upload, tanpa akun, tanpa watermark.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset menaruh bayangan *di dalam* elemen; tanpanya, bayangan jatuh di luar.rgba() (atau hsla()) untuk warnanya supaya kamu bisa mengatur opasitas per lapisan. Hitam pekat dengan opasitas rendah terlihat seperti bayangan abu-abu yang lembut; hitam pekat dengan opasitas penuh terlihat seperti potongan yang keras.box-shadow dikomposisi oleh GPU dan termasuk peningkatan visual paling murah yang bisa kamu terapkan. Property ini tidak memengaruhi layout: elemen tetap pada ukuran dan posisi aslinya.Pilih preset yang sesuai dengan kesan yang kamu inginkan: kartu halus, elevasi lembut, bayangan tajam, cahaya merek, cekungan inset, atau neumorphic. Preset adalah titik awal yang bagus untuk kamu atur lagi.
Geser slider untuk offset X/Y, blur, spread, warna, dan opasitas. Preview di kiri langsung diperbarui. Opasitas lebih rendah dan blur lebih tinggi menghasilkan bayangan yang *lebih lembut*.
Klik *Tambah lapisan* untuk menumpuk bayangan kedua. Kedalaman yang realistis hampir selalu memakai dua lapisan: satu pendek dan rapat (bayangan kontak) dan satu panjang dan lembut (bayangan sekitar).
Menyalakan *Inset* melukis bayangan di dalam elemen, bukan di sekelilingnya. Gabungkan dengan bayangan luar yang halus untuk efek tombol yang sedang ditekan.
Ketika preview sudah sesuai dengan desainmu, klik *Salin CSS*. Tempel hasilnya ke stylesheet-mu; aturan yang dihasilkan sudah mencakup semua lapisan yang aktif.
Setiap nilai dalam box-shadow: x y blur spread color dan perannya.
| Nilai | Efek | Rentang umum |
|---|---|---|
| Offset X | Menggeser bayangan secara horizontal; positif = ke kanan | −40px sampai 40px |
| Offset Y | Menggeser bayangan secara vertikal; positif = ke bawah | 0px sampai 40px untuk cahaya alami |
| Blur | Melembutkan tepi bayangan | 0px sampai 80px |
| Spread | Membesarkan atau mengecilkan sebelum blur diterapkan | −30px sampai 30px |
| Warna | Warna CSS apa pun, tapi rgba() membuatmu bisa mengatur opasitas per lapisan | rgba(0,0,0,0.05–0.3) untuk bayangan alami |
inset | Melukis bayangan di dalam elemen | - |
| Beberapa lapisan | Dipisahkan koma; ditumpuk dari belakang ke depan | 2 sampai 3 lapisan memberi kedalaman realistis |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Bayangan rapat dengan blur rendah menentukan titik kontak, dan bayangan yang lebih panjang dan lembut memberi kesan cahaya sekitar. Inilah pola yang dipakai sebagian besar design system modern.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Atur X dan Y ke nol supaya cahayanya memancar merata. Spread positif kecil menebalkan cahaya sebelum blur melembutkannya. Pakai secukupnya, karena cahaya berwarna sangat menarik perhatian.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Bayangan inset dilukis di dalam elemen. Satu bayangan lembut memberi kesan cekungan; inset setipis rambut menambahkan border dalam yang halus agar bentuknya lebih tegas.
filter: drop-shadow() dan box-shadow sama saja. drop-shadow() mengikuti alpha mask dari SVG atau gambar, berguna untuk bentuk tidak beraturan, tapi box-shadow lebih cepat dan lebih rapi untuk elemen persegi panjang.box-shadow mengabaikan overflow: hidden pada elemen itu sendiri. Kalau parent-nya punya overflow: hidden, bayangannya akan terpotong.box-shadow?box-shadow: x y blur spread color. Dua nilai pertama adalah offset; *blur* melembutkan tepi; *spread* mengubah ukuran sebelum blur; warnanya bisa warna CSS apa pun (pakai rgba() untuk mengatur opasitas). Tambahkan inset di awal untuk menaruh bayangan di dalam elemen.Pisahkan setiap bayangan dengan koma. Bayangan dirender dari belakang ke depan sesuai urutan penulisan, jadi bayangan yang dideklarasikan pertama berada *di bawah* yang berikutnya. Pakai cara ini untuk menggabungkan bayangan kontak yang rapat dengan bayangan sekitar yang lembut.
box-shadow dengan filter: drop-shadow()?box-shadow mengikuti kotak pembatas elemen dan cepat dilukis. drop-shadow() mengikuti kanal alpha dari apa pun yang diberi efek itu (bagus untuk SVG dan PNG transparan), tapi lebih berat untuk dirender. Pakai box-shadow untuk kartu dan tombol; pakai drop-shadow() untuk bentuk tidak beraturan.transform: scale() di elemen induknya.box-shadow memengaruhi layout?overflow: visible.