Bagaimana cara mencipta bayang kotak CSS dan menyalin kodnya?

Laraskan peluncur untuk ofset x dan y, kabur, sebaran, Warna dan kelegapan, sambil melihat pratonton langsung. Kemudian tekan Salin dalam output CSS. Anda juga boleh bermula dari Pratetapan seperti Lembut, Cahaya atau Material 8.

Bolehkah saya menindan berbilang bayang pada satu elemen?

Ya. Tekan + Tambah lapisan bayang lain untuk menambah lebih banyak lapisan, kemudian susun semula, Sembunyikan atau Buang setiap satu. Lapisan-lapisan itu digabungkan dengan koma dalam satu nilai box-shadow.

Bagaimana cara membuat bayang dalaman?

Pilih satu lapisan dan hidupkan Bayang dalaman, atau muatkan pratetap Bayang dalaman. Output kemudiannya menyertakan kata kunci inset untuk lapisan itu.

Bolehkah saya dapatkan kelas Tailwind dan bukannya CSS biasa?

Ya. Selain deklarasi CSS, alat ini mengeluarkan kelas nilai arbitrari Tailwind dalam bentuk shadow-[...], dengan ruang digantikan dengan garis bawah, sedia untuk ditampal ke dalam penanda anda.

Adakah cara yang lebih mudah untuk menetapkan kedudukan bayang selain menggunakan peluncur?

Ya. Seret kotak pratonton untuk menggerakkan bayang lapisan aktif, dan tahan Shift untuk kawalan halus. Anda juga boleh menukar Pratonton latar belakang dan Warna kotak untuk melihat rupa bayang pada rekaan anda.

Adakah ia benar-benar percuma?

Ya. Setiap alat adalah percuma untuk digunakan, tanpa akaun dan tanpa kad kredit. Kerja dijalankan pada peranti anda dan bukannya pada pelayan kami, itulah yang menjadikannya percuma untuk dijalankan.

Adakah ia berfungsi pada peranti mudah alih?

Ya. Ia berjalan dalam pelayar mudah alih semasa di iOS dan Android, tanpa apa-apa untuk dipasang.

🎨

Penjana Bayang Kotak CSS percuma

Pembina visual untuk box-shadow CSS dengan pratonton langsung, penindanan berbilang lapisan, pemilih warna, togol inset, dan salin satu klik. Termasuk pratetap Material, neumorfisme, dan cahaya.

Berjalan dalam pelayar andaTiada daftar, tiada tetingkap timbulTiada log masuk diperlukanPercuma selama-lamanya

Berfungsi luar talian selepas dimuatkan

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);

Pratetapan

Warna kotak

Jejari sempadan (16px)

x (0px)

y (4px)

kabus (12px)

sebaran (0px)

Warna

Kelegapan (15%)

Bayang dalaman

Kegunaan biasa

Bayangan Kad UIBina bayangan kad yang elegan untuk papan pemuka, grid produk dan papan pemuka.
Kesan Tekan ButangBina bayangan butang yang meniru kedalaman dunia nyata dan keadaan tekan.
Neumorphism UI LembutBuat rupa UI lembut neumorphism dengan bayangan berpasangan cahaya + gelap.
Bayangan Modal & PopoverBina rasa yang ditinggikan dan melayang untuk dialog dan dropdown.
Kesan bercahaya dan cincin tumpuanBuat kesan tekanan bercahaya, cincin tumpuan dan penyerlahan gaya neon.

Cara ia berfungsi

Penjana box-shadow ialah alat React sepenuhnya-sisi-klien — tiada pelayan, tiada pustaka. Ia mengekalkan senarai objek lapisan bayang dalam state, membina rentetan CSS box-shadow yang sah pada setiap perubahan menggunakan pemformat rgba() tulisan tangan, dan mengenakannya terus pada elemen pratonton melalui prop style React supaya enjin pemaparan pelayar sendiri melukis hasilnya serta-merta.

1
Parameter lapisan memberi makan pemformat
Setiap lapisan bayang menyimpan ofset x/y, kabur, sebaran, warna heks, dan nilai kelegapan. Pada setiap perubahan, fungsi shadowToCss kecil menukar warna heks kepada komponen RGB dengan regex, kemudian membina rentetan rgba() — contohnya, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Berbilang lapisan digabung dengan koma.
2
Pelayar memaparkan pratonton langsung
Rentetan yang dibina ditetapkan kepada sifat gaya boxShadow elemen div terus dalam JSX. React mengemas kini atribut DOM, dan enjin CSS pelayar mengecat bayang serta-merta — tiada kanvas atau WebGL terlibat, hanya pemaparan CSS asli.
3
Seret-untuk-posisi menggunakan Pointer Events API
Mengklik dan menyeret kotak pratonton memanggil setPointerCapture pada elemen, kemudian menjejaki delta onPointerMove untuk mengemas kini ofset x dan y lapisan aktif secara masa nyata. Menahan Shift mengenakan faktor skala 0.25x untuk pemposisian halus.
4
Output disalin ke papan keratan
Alat ini menghasilkan dua format output daripada data lapisan yang sama: pengisytiharan CSS box-shadow standard, dan kelas nilai-sembarang Tailwind (shadow-[...]) di mana ruang digantikan dengan garis bawah mengikut peraturan sintaks Tailwind. Salinan satu-klik menggunakan navigator.clipboard.writeText.