CSS 陰影產生器
CSS 陰影產生器是一款可用 GUI 製作元素陰影 CSS 程式碼的免費 box-shadow 產生器。只要用滑桿調整偏移（水平、垂直位置）、模糊、擴散（spread）、顏色與不透明度，就能即時產生 box-shadow 與 filter: drop-shadow() 的 CSS。
輸出類型
陰影圖層設定
- 1
預設
CSS 程式碼
.shadow {
box-shadow: 0px 10px 20px -4px rgba(15, 23, 42, 0.25);
}
陰影的產生全部在你的瀏覽器內進行，輸入的內容不會傳送至外部伺服器。
預覽
範例元素設定
相關工具
色彩選擇器
從圖片中擷取顏色並取得色碼的免費色彩選擇器，可用放大鏡依像素精準拾取，支援 HEX / RGB / HSL 切換與調色盤匯出。免費、免註冊。
- 設計與配色
- 效率
圖片配色擷取
線上圖片取色工具，上傳圖片即可自動從圖片擷取主要配色（代表色／主色）並產生調色盤。支援 HEX/RGB/HSL 三種格式、顯示各顏色占比、可調整 4–12 種顏色，並能匯出 JSON、CSS 變數、SCSS 或 Tailwind 設定。圖片不上傳伺服器，全程在瀏覽器中完成，免費且無需註冊。
- 擷取
- 設計與配色
配色產生器
只要選一個基準色，就能依配色理論自動產生互補色、類似色、三角配色等配色方案的免費配色產生器。可輸出 CSS 變數、Tailwind、SCSS、JSON 格式，並提供對比度參考，全程在瀏覽器中完成。
- 產生器
- 設計與配色
色碼轉換
在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具，支援透明度（RGBA、8 位 HEX）與 CMYK 參考值，一鍵複製任意格式，全程在瀏覽器中完成。
- 轉換
- 設計與配色
對比度檢查
即時計算前景色與背景色對比度的免費對比度檢查工具，依 WCAG 2.1/2.2 判定 AA、AAA 是否合格，並支援合格色建議、色覺（色盲）模擬與 APCA，全程在瀏覽器中完成。
- 檢查
- 設計與配色
- 無障礙
CSS 漸層產生
以 GUI 操作顏色、方向與色彩停駐點,即可自動產生 CSS 漸層程式碼的免費漸層產生器。支援線性、放射、圓錐（conic）漸層,可調整不透明度,並輸出 CSS 變數、Tailwind、SCSS 格式與分享 URL。複製即可使用,全程在瀏覽器中完成。
- 產生器
- 開發
- 設計與配色
CSS 陰影產生器是什麼?
CSS 陰影產生器是一款可用 GUI 製作元素陰影 CSS 程式碼的免費 box-shadow 產生器。只要用滑桿調整偏移（水平、垂直位置）、模糊、擴散（spread）、顏色與不透明度，就能即時產生 box-shadow 與 filter: drop-shadow() 的 CSS。
陰影可疊加多個圖層，從自然柔和的陰影到具立體感的豐富陰影都能自由呈現。每個圖層都能切換為內陰影（inset），並可拖曳調整疊放順序。顏色除了 HEX，也支援貼上 rgb() / hsl()。
陰影圖層與新擬態是透過頁面頂部切換的兩種獨立模式，各自產生獨立的輸出。在陰影圖層模式下，柔和陰影、Material 風格的層級陰影、漂浮、銳利陰影、長陰影、發光（glow）等預設都能一鍵套用；新擬態則是專用模式，透過調整底色、距離、強度等滑桿即時產生凹凸感的（Neumorphism UI）陰影。你可以一邊變更預覽的背景色、元素色、形狀（圓角、圓形、方形），一邊確認實際呈現效果並進行調整。
製作好的陰影，可分別以 CSS（box-shadow / filter）、CSS 變數、Tailwind 設定、SCSS 變數等格式一鍵複製，直接貼到專案中實作。按下「複製 URL」即可取得能重現目前設定的分享 URL，方便團隊共用或加入書籤。陰影的產生全部在你的瀏覽器內進行，輸入的內容不會傳送至外部伺服器。全程在瀏覽器中完成。
使用方法
- 選擇輸出類型（box-shadow / drop-shadow）。box-shadow 支援 spread（擴散）與 inset（內陰影），drop-shadow 則能產生貼合元素形狀的陰影。
- 新增圖層，用滑桿調整水平、垂直位置、模糊、擴散、顏色與不透明度。多個圖層可拖曳調整疊放順序，並能透過 inset 改為內陰影。
- 在「陰影圖層」模式下一鍵套用預設（柔和、Material、漂浮、銳利、長陰影、發光）；若要製作凹凸陰影，請從頂部切換到「新擬態」模式，以底色、距離、強度等滑桿即時產生。並可變更預覽的背景色、元素色與形狀來確認成品。
- 在「CSS 程式碼」中切換 CSS、CSS 變數、Tailwind、SCSS 分頁，以「複製 CSS 程式碼」取得程式碼貼到專案中。按「複製 URL」即可分享設定。
使用情境
- 想為按鈕、卡片、彈窗等加上柔和陰影的設計師與切版人員，直接複製貼上 box-shadow 的 CSS 立即使用。
- 想組合多圖層與 inset，做出具立體感的精緻陰影或內陰影的前端工程師。
- 想依底色快速產生新擬態（Neumorphism UI）凹凸陰影的人。
- 想將陰影直接寫進 Tailwind 的 boxShadow 設定，或 CSS 變數、SCSS 變數的開發者。
- 想用分享 URL 把決定好的陰影交給團隊，或之後重現相同設定的人。
注意事項
- 陰影的產生全部在瀏覽器內進行，輸入的內容不會傳送至外部。
- drop-shadow（`filter: drop-shadow()`）不支援 spread（擴散）與 inset（內陰影）。這些只有在選擇 box-shadow 時才會生效。
- drop-shadow 疊加多層時，會在前一個陰影的結果上再疊加陰影（與以逗號分隔的 box-shadow 呈現方式不同）。
- 分享 URL 包含輸出類型、各圖層（位置、模糊、擴散、顏色、不透明度、inset）與預覽設定。開啟該 URL 即可用相同設定重現陰影。