🎨
免費CSS 盒陰影產生器
視覺化建立 CSS box-shadow，帶即時預覽、多層疊加、顏色選擇器、內陰影切換和一鍵複製。包含 Material、新擬物和發光預設。
載入後可離線使用
預覽背景
拖曳方框以定位活動圖層的陰影 - 按住Shift進行微調
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);預設
工作原理
陰影產生器是完全在客戶端執行的 React 工具——沒有伺服器、沒有庫。它在狀態中維護陰影層物件列表，每次更改時使用手寫的 rgba() 格式化函式組裝有效的 CSS box-shadow 字串，並透過 React 的 style 屬性直接應用到預覽元素上，由瀏覽器自身的渲染引擎即時繪製結果。
- 1圖層引數傳入格式化函式每個陰影層儲存 x/y 偏移、模糊、擴展、十六進位制顏色和不透明度。每次更改時，一個小型 shadowToCss 函式用正則將十六進位制顏色轉換為 RGB 分量，然後組裝 rgba() 字串——例如 0px 4px 12px 0px rgba(0, 0, 0, 0.15)。多個圖層用逗號連線。
- 2瀏覽器渲染即時預覽組裝好的字串在 JSX 中直接賦給 div 元素的 boxShadow 樣式屬性。React 更新 DOM 屬性，瀏覽器的 CSS 引擎立即繪製陰影——不涉及 canvas 或 WebGL，只有原生 CSS 渲染。
- 3拖曳定位使用 Pointer Events API在預覽框上點選並拖曳會對元素呼叫 setPointerCapture，然後追蹤 onPointerMove 的位移，即時更新當前圖層的 x 和 y 偏移。按住 Shift 會應用 0.25 倍的縮放係數，便於精細定位。
- 4輸出複製到剪貼簿工具從同一圖層資料產生兩種輸出格式：標準 CSS box-shadow 宣告，以及 Tailwind 任意值類（shadow-[...]），其中空格按 Tailwind 語法規則替換為底線。一鍵複製使用 navigator.clipboard.writeText。