Bagaimana cara membuat box-shadow CSS dan menyalin kodenya?

Sesuaikan penggeser untuk offset x dan y, blur, spread, Warna, dan Opasitas, sambil melihat pratinjau langsung. Lalu tekan Salin di output CSS. Anda juga bisa mulai dari Prasetel seperti Lembut, Cahaya, atau Material 8.

Bisakah saya menumpuk beberapa bayangan pada satu elemen?

Ya. Tekan + Tambah lapisan bayangan lain untuk menambah lapisan, lalu atur ulang, Sembunyikan, atau Hapus masing-masing. Lapisan-lapisan tersebut digabungkan dengan koma dalam satu nilai box-shadow.

Bagaimana cara membuat bayangan inset?

Pilih sebuah lapisan dan aktifkan Bayangan inset, atau muat prasetel Inset. Output kemudian menyertakan kata kunci inset untuk lapisan tersebut.

Bisakah saya mendapatkan kelas Tailwind alih-alih CSS biasa?

Ya. Selain deklarasi CSS, alat ini menghasilkan kelas nilai arbitrer Tailwind dalam bentuk shadow-[...], dengan spasi diganti garis bawah, siap ditempel ke markup Anda.

Apakah ada cara yang lebih mudah untuk mengatur posisi bayangan selain penggeser?

Ya. Seret kotak pratinjau untuk memindahkan bayangan lapisan aktif, dan tahan Shift untuk kontrol yang lebih halus. Anda juga dapat mengubah Pratinjau latar belakang dan Warna kotak untuk melihat tampilan bayangan pada desain Anda.

Apakah benar-benar gratis?

Ya. Setiap alat gratis digunakan, tanpa akun dan tanpa kartu kredit. Prosesnya berjalan di perangkat Anda, bukan di server kami, itulah yang membuatnya tetap gratis.

Apakah berfungsi di mobile?

Ya. Berjalan di browser seluler terbaru di iOS dan Android, tanpa perlu memasang apa pun.

🎨

Generator Box Shadow CSS gratis

Pembangun visual untuk box-shadow CSS dengan pratinjau langsung, penumpukan multi-lapisan, pemilih warna, toggle inset, dan salin satu klik. Termasuk prasetel Material, neumorphism, dan glow.

Berjalan di browser AndaTanpa daftar, tanpa pop-upTidak perlu loginGratis selamanya

Berfungsi offline setelah dimuat

Pratinjau latar belakang

Seret kotak untuk memposisikan bayangan lapisan aktif - tahan Shift untuk kontrol halus

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

Prasetel

Warna kotak

Border radius (16px)

x (0px)

y (4px)

blur (12px)

spread (0px)

Warna

Opasitas (15%)

Bayangan inset

Penggunaan umum

Bayangan UI KartuBangun bayangan kartu yang elegan untuk dasbor, kisi produk, dan dasbor.
Efek Tekan TombolBangun bayangan tombol yang meniru kedalaman dunia nyata dan status tekan.
Neumorphism Soft UIBuat tampilan soft-UI neumorphism dengan bayangan terang + gelap berpasangan.
Bayangan Modal dan PopoverBuat nuansa terangkat dan melayang untuk dialog dan menu tarik-turun.
Efek Bersinar dan Cincin FokusBuat efek aksen bersinar, cincin fokus, dan sorotan gaya neon.

Cara kerja

Generator box-shadow adalah alat React yang sepenuhnya sisi-klien — tanpa server, tanpa library. Ini menyimpan daftar objek lapisan bayangan dalam state, merangkai string CSS box-shadow yang valid setiap ada perubahan menggunakan pemformat rgba() tulisan tangan, dan menerapkannya langsung ke elemen pratinjau via prop style React sehingga mesin rendering browser sendiri menggambar hasilnya secara instan.

1
Parameter lapisan memberi masukan ke pemformat
Setiap lapisan bayangan menyimpan offset x/y, blur, spread, warna heksa, dan nilai opasitas. Setiap ada perubahan, fungsi shadowToCss kecil mengonversi warna heksa ke komponen RGB dengan regex, lalu merangkai string rgba() — misalnya, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Beberapa lapisan digabungkan dengan koma.
2
Browser merender pratinjau langsung
String yang dirangkai ditetapkan ke properti gaya boxShadow elemen div langsung di JSX. React memperbarui atribut DOM, dan mesin CSS browser melukis bayangan segera — tidak ada canvas atau WebGL yang terlibat, hanya rendering CSS native.
3
Seret-untuk-posisi menggunakan Pointer Events API
Mengklik dan menyeret kotak pratinjau memanggil setPointerCapture pada elemen, lalu melacak delta onPointerMove untuk memperbarui offset x dan y lapisan aktif secara real time. Menahan Shift menerapkan faktor skala 0,25x untuk pemosisian yang lebih presisi.
4
Keluaran disalin ke clipboard
Alat ini menghasilkan dua format keluaran dari data lapisan yang sama: deklarasi CSS box-shadow standar, dan kelas nilai-sembarang Tailwind (shadow-[...]) di mana spasi diganti dengan garis bawah sesuai aturan sintaks Tailwind. Salin sekali klik menggunakan navigator.clipboard.writeText.