Generator Box-Shadow CSS

Buat Box-Shadow CSS Apa Pun Secara Visual — Tanpa Coba-Coba

Generator box-shadow CSS gratis ini menggantikan proses tebak-tebakan yang melelahkan di editor kode dengan kanvas visual langsung. Geser slider untuk offset, blur, spread, dan opacity — bayangan pada elemen preview diperbarui secara real time — dan kode CSS siap salin menunggu di bagian bawah dalam format pilihan Anda. Tidak ada data yang diunggah, tidak perlu akun, dan semua perhitungan berjalan lokal di browser Anda.

Mulailah dari salah satu dari delapan preset bawaan atau dari layer kosong. Tambahkan beberapa layer bayangan untuk membangun efek kedalaman yang realistis, aktifkan latar gelap/terang untuk memeriksa kontras, lalu pilih format keluaran: deklarasi properti CSS lengkap, nilai bayangan saja, atau string inline style camelCase yang siap dipakai di React. Generator ini mencakup semuanya, mulai dari elevasi kartu yang halus, ekstrusi neumorphic, hingga efek glow neon.

Memahami Enam Parameter box-shadow

Offset X dan Y menentukan posisi bayangan relatif terhadap elemen — X positif menggesernya ke kanan, Y positif menggesernya ke bawah. Offset negatif menggeser ke kiri atau ke atas, berguna untuk efek bayangan dengan pencahayaan dari atas. Blur radius mengontrol kelembutan tepi: nilai nol menghasilkan garis tepi yang keras dan tajam; nilai yang lebih besar menciptakan gradasi lembut yang terasa seperti kedalaman alami. Spread radius memperbesar atau memperkecil bayangan sebelum blur diterapkan — spread negatif dengan blur besar menjaga bayangan tetap berada di dalam jejak alami elemen, teknik di balik sebagian besar bayangan kartu yang realistis.

Warna biasanya berupa nilai gelap semi-transparan seperti `rgba(0, 0, 0, 0.12)` untuk elevasi netral, atau warna cerah untuk efek glow. Slider opacity memungkinkan Anda menyetel alpha secara terpisah dari color picker. Toggle Inset membalik arah bayangan, menggambarnya di dalam border box untuk menciptakan cekungan, kolom input yang tampak menjorok, dan status tombol yang sedang ditekan — kemampuan yang tidak bisa ditiru oleh `filter: drop-shadow()`.

Bayangan Multi-Layer untuk Kedalaman yang Profesional dan Realistis

Satu bayangan besar tunggal terlihat artifisial — mirip filter drop-shadow Photoshop generik, bukan cahaya sungguhan. UI profesional menggunakan tiga hingga lima layer bayangan bertumpuk, di mana setiap layer kira-kira menggandakan offset dan blur sambil mengurangi setengah opacity-nya. Teknik ini meniru cara cahaya menyebar secara fisik dari sumbernya dan menghasilkan bayangan yang tetap terasa alami pada ukuran atau jarak pandang berapa pun.

Generator ini mendukung hingga delapan layer independen. Setiap layer memiliki offset, blur, spread, warna, opacity, dan toggle inset sendiri. Ikon mata pada setiap layer memungkinkan Anda menampilkan atau menyembunyikan layer untuk perbandingan sebelum/sesudah secara instan tanpa menghapusnya. Preset Deep menampilkan tumpukan tiga layer bergradasi; Floating memakai dua layer yang saling melengkapi untuk memberi kesan elemen terangkat di atas halaman; Material mereproduksi spesifikasi elevasi multi-layer dari Google Material Design.

Preset: Card, Crisp, Neumorphic, Glow, dan Lainnya

Preset Soft card menghasilkan elevasi yang nyaris tak terlihat — cukup untuk memisahkan kartu putih dari halaman tanpa bersaing dengan isinya. Crisp memberikan bayangan bertepi keras tanpa blur yang populer dalam tren desain brutalist dan retro. Material mereproduksi spesifikasi bayangan multi-layer Google Material Design untuk aplikasi dengan sistem kedalaman bergaya Android yang familier.

Neumorphic menggabungkan highlight terang di kiri-atas dengan bayangan gelap di kanan-bawah agar elemen tampak menonjol dari permukaan yang warnanya sama. Deklarasi neumorphic klasik: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)` — latar elemen harus sama persis dengan latar halaman agar ilusinya bekerja. Glow Blue menunjukkan bagaimana bayangan berwarna tanpa offset menciptakan tombol atau aksen hero yang bercahaya — ganti warnanya agar sesuai dengan brand Anda. Inset Well memperlihatkan teknik inset untuk elemen UI yang menjorok seperti input teks dan status tertekan. Muat preset mana pun lalu sesuaikan slider hingga persis seperti kebutuhan desain Anda.

Sintaks Lima Nilai box-shadow, Dijelaskan Lengkap

Sintaks lengkap box-shadow adalah: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Hanya dua offset dan warna yang wajib; blur dan spread bernilai default nol. Offset-x dan offset-y mengikuti sistem koordinat CSS yang titik asalnya berada di pojok kiri-atas viewport: offset-x positif menggeser bayangan ke kanan, nilai negatif ke kiri; offset-y positif menggeser ke bawah, negatif ke atas. Artinya, bayangan di 4px 8px berada di bawah dan di kanan elemen — sesuai konvensi sumber cahaya dari atas kiri. Bayangan kartu yang umum tampak seperti: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`.

Blur-radius tidak boleh negatif. Pada nilai nol, bayangan memiliki tepi yang benar-benar keras dan bentuknya identik dengan border box elemen — nilai di atas nol menerapkan Gaussian blur pada siluet solid dari box tersebut, sehingga menaikkan blur akan melebarkan dan melembutkan gradasinya. Spread-radius memperluas atau menyusutkan garis luar bayangan sebelum blur diterapkan: nilai positif membuat bayangan lebih besar dari elemen, nilai negatif menyempitkannya. Mengatur offset-x: 0, offset-y: 0, blur: 0, dan spread positif menghasilkan garis tepi solid yang merata tanpa blur — alternatif cepat CSS untuk outline atau elemen pembungkus tambahan.

Kata kunci opsional inset yang diletakkan sebelum offset mengubah bayangan dari drop shadow luar menjadi bayangan dalam yang digambar pada sisi dalam border box elemen. Arah offset ikut berbalik secara intuitif: offset-y positif mendorong bayangan dalam ke bawah dari tepi atas, menciptakan kesan rongga cekung yang diterangi dari atas. Terakhir, bayangan dalam jumlah berapa pun dapat ditumpuk sebagai daftar yang dipisah koma. Browser merendernya sesuai urutan deklarasi dengan bayangan pertama digambar paling atas — sehingga pada aturan neumorphic dua bayangan, highlight harus ditulis lebih dulu (secara visual di depan) dan bayangan gelap kedua. Urutan ini kebalikan dari penumpukan z-index, yang sering membingungkan developer yang baru mengenal bayangan multi-layer.

box-shadow vs filter: drop-shadow() vs Figma — Mana yang Dipakai?

Perbedaan kunci antara box-shadow dan filter: drop-shadow() adalah apa yang mereka bayangi. box-shadow selalu membayangi border box persegi panjang elemen — persegi layout yang ditentukan oleh width, height, padding, dan border — terlepas dari tampilan visual elemen tersebut. Gambar PNG dengan sudut transparan tetap mendapat bayangan persegi yang memotong area transparan itu. Sebaliknya, filter: drop-shadow() menelusuri siluet alpha channel elemen: mengikuti piksel yang benar-benar buram, sehingga potongan PNG transparan berbentuk bintang mendapat bayangan berbentuk bintang, dan SVG dengan area berlubang dibayangi mengikuti bentuk aslinya yang terlihat.

Karakteristik performanya juga berbeda. box-shadow diproses pada tahap compositing browser dan biasanya diakselerasi GPU: bayangan dihitung sekali lalu digabungkan dengan layer elemen secara murah. filter: drop-shadow() dapat memicu pembentukan stacking context baru dan memerlukan pemindaian alpha channel tingkat piksel atas konten elemen, yang bisa lebih lambat — terutama pada elemen dengan banyak node anak. Browser modern (Chromium 100+, Firefox 110+, Safari 16+) telah banyak meningkatkan akselerasi filter, tetapi untuk bayangan beranimasi pada komponen kompleks, box-shadow tetap pilihan yang paling aman. Selain itu, filter: drop-shadow() hanya menerima tiga nilai posisi plus warna — tanpa spread-radius dan tanpa dukungan inset. Aturan praktisnya: pakai box-shadow untuk semua komponen UI standar — kartu, tombol, modal, tooltip, panel — dan sisakan filter: drop-shadow() khusus untuk gambar dengan transparansi bermakna, ikon SVG, dan elemen dekoratif berbentuk tidak beraturan.

Figma dan Adobe XD sama-sama menyediakan panel desain bayangan, tetapi keluarannya adalah nilai design tool — tidak selalu kompatibel dengan CSS tanpa konversi manual. Generator ini langsung menghasilkan CSS yang valid dan siap produksi, menghapus langkah penerjemahan itu. Berbeda dengan tier gratis Figma yang terbatas atau model langganan Adobe XD, UtiloKit sepenuhnya gratis, berjalan di browser apa pun tanpa instalasi, dan menghasilkan berbagai format keluaran (CSS, value, React) tanpa perlu akun design tool.

Sistem Elevasi, Performa, dan Tiga Format Salin

Google Material Design memformalkan bayangan sebagai sistem elevasi semantik, bukan sekadar properti dekoratif. Setiap komponen punya elevasi istirahat yang diukur dalam density-independent pixels (dp). Permukaan datar berada di 0 dp; tombol raised berada di 2 dp dan naik ke 8 dp saat hover; dialog berada permanen di 24 dp. Material Design mencapai bayangan realistis dengan menumpuk dua deklarasi box-shadow sekaligus per tingkat elevasi — satu untuk key light (sumber cahaya terarah dari atas, menghasilkan bayangan tegas dengan offset y sedang dan blur tinggi) dan satu untuk ambient light (cahaya menyebar dari segala arah, menghasilkan bayangan lebih lembut beropasitas rendah dengan offset minimal). Pada elevasi 6dp, misalnya, bayangan key light kira-kira 0 3px 5px rgba(0,0,0,0.2) dan bayangan ambient-nya 0 1px 18px rgba(0,0,0,0.12). Terpisah dari Material Design, desainer Josh Comeau mempopulerkan dua penyempurnaan: memberi tint warna latar pada bayangan alih-alih memakai rgba(0,0,0,X) murni, dan teknik smooth shadow — menumpuk lima atau enam layer yang nilai blur dan offset-nya mengikuti kurva easing alih-alih langkah linear, sehingga gradasi kegelapan terasa kontinu, bukan berundak.

`box-shadow` statis digambar sekali dan digabungkan dengan murah — bukan masalah performa bagi kebanyakan UI. Namun menganimasikannya secara langsung memicu repaint di setiap frame. Alternatif yang performan: tambahkan pseudo-element `::after` yang sudah memiliki bayangan tujuan, lalu `transition: opacity` pada elemen itu. GPU mengomposit opacity tanpa menggambar ulang bayangan, menghasilkan animasi mulus tanpa biaya repaint.

Setelah bayangan Anda pas, salin dalam format yang dibutuhkan proyek: properti CSS untuk stylesheet, value saja untuk CSS variable atau map SCSS, atau React inline style untuk prop `style` di JSX dan Styled Components. Generator ini juga sepenuhnya responsif: di desktop tersedia tata letak tiga kolom, sedangkan di iPhone dan Android tata letaknya menyusun vertikal dengan slider ramah sentuhan dan color picker sistem bawaan. Konfigurasi Anda tidak pernah disimpan ke server atau dikirim ke mana pun — tutup tab dan semuanya hilang. Simpan halaman ini di bookmark dan kembalilah kapan pun Anda perlu mengulik desain bayangan.