CSS box-shadow examples by CSS Scan – 免費提供 95 種 Box-shadow CSS 陰影樣式，隨點擊複製使用 CSS 程式碼

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

CSS box-shadow examples by CSS Scan 是一個收錄 95 種免費 CSS 陰影效果的線上資源庫，每一種都可以點擊直接複製程式碼，不需要註冊帳號，打開頁面就能使用。

這個頁面由 CSS Scan 團隊維護，把常見且實用的 box-shadow 樣式整理成一個可視覺化預覽的集合。對於不熟悉 CSS 陰影參數的人，它省掉了自己反覆試錯的時間；對於有經驗的前端開發者，它也是快速取得設計靈感的參考來源。所有樣式都可以免費商用，沒有版權限制。

網站名稱：Beautiful CSS box-shadow examples – CSS Scan
網站網址：https://getcssscan.com/css-box-shadow-examples

CSS box-shadow examples 是什麼？

CSS box-shadow examples 是一個專門收集 CSS 陰影效果的免費線上工具頁面。頁面上排列了 95 個白色方塊，每個方塊套用了不同的 box-shadow 屬性，呈現出從極淡的微陰影到誇張的多層疊加陰影等各種效果。使用者只要點擊任何一個預覽方塊，對應的 CSS 程式碼就會自動複製到剪貼簿，直接貼到自己的專案裡就能套用。

CSS Scan 本身是一款付費的瀏覽器擴充功能，可以即時檢查和複製任何網站的 CSS 樣式。而這個 box-shadow 範例頁面是他們額外提供的免費資源，屬於開放給所有人使用的設計素材庫。如果你平常會使用 CSS.GG 圖標庫 或 Heroicons SVG 圖標 這類前端資源，CSS box-shadow examples 屬於同一類型的工具，都是幫開發者節省重複造輪子的時間。

誰適合使用這個工具？

• 前端開發者：需要快速找到符合設計系統的陰影效果，不想從零開始調參數。
• WordPress 網站經營者：想要用 CSS 美化按鈕、卡片或導航列的外觀，但不熟悉 box-shadow 的參數組合。
• 網頁設計學習者：想觀摩不同陰影效果的參數設定方式，從中學習 box-shadow 的實際運用邏輯。

誰不適合？

如果你需要的是一個可以即時拖曳調整參數的陰影產生器，而不是從預設樣式中挑選，那 CSS box-shadow examples 可能無法完全滿足需求。這種情況下，建議使用 CSSmatic 等視覺化 box-shadow 產生器，或者參考 Neumorphism CSS Generator 新擬態產生器 來做更細緻的調整。

box-shadow CSS 語法教學

了解 box-shadow 的語法結構，才能根據自己的需求調整從 CSS box-shadow examples 複製回來的程式碼。box-shadow 的完整語法如下：

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

各個參數的作用：

最簡單的寫法只需要水平和垂直偏移：

box-shadow: 5px 5px rgba(0, 0, 0, 0.3);

加上模糊半徑讓陰影更柔和：

box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);

box-shadow 也支援用逗號分隔多組陰影值，這在製作層次感更豐富的效果時很常用。如果你想進一步了解 CSS 色彩搭配，可以參考 Alwane 網站色碼分析工具、Colorion 調色盤產生器 或 CSS Gradient 線上漸層產生器。

CSS box-shadow examples 操作教學：3 步驟複製陰影樣式

使用這個工具的流程非常直覺，三個步驟就能完成：

步驟 1：開啟頁面

在瀏覽器中前往 getcssscan.com/css-box-shadow-examples，頁面載入後就能看到所有 95 種陰影效果的預覽。每個預覽都是一個白色方塊，上面套用了對應的 box-shadow CSS 屬性。

步驟 2：挑選樣式

瀏覽頁面上的陰影效果，找到符合專案風格的樣式。頁面上的樣式從極簡的微陰影到多層疊加的複雜陰影都有。如果是在做 WordPress 網站的調整，建議選擇偏柔和的陰影，搭配 WordPress 快取外掛 優化後的網站，整體體驗會更流暢。

Pin

步驟 3：點擊複製

找到喜歡的樣式後，直接點擊那個陰影預覽方塊。CSS 程式碼會自動複製到剪貼簿，格式如下：

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

把這行程式碼貼到 CSS 樣式表中對應的選擇器裡就行了。如果你需要在 WordPress 中自訂捲軸樣式，也可以參考 WordPress 自訂滾動條教學，操作邏輯類似。

box-shadow 實際應用場景與 CSS 範例

了解語法和操作方式後，以下是 box-shadow 在實際網頁設計中的幾個常見應用場景。每個場景都附上可直接複製使用的 CSS 程式碼。

按鈕懸浮效果

按鈕加上 hover 時的陰影變化，是提升互動感最直接的做法。平常狀態下只加淡陰影，滑鼠移上去時顯示更明顯的效果：

.btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

卡片元件的立體感

卡片式佈局幾乎都會用到 box-shadow 來讓卡片從背景中浮起。許多 WordPress 佈景主題 內建就使用這種陰影效果。搭配 UI Design Daily 的免費設計資源 或 Free Deca UI Kit，可以找到更多卡片設計靈感。

.card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

導航列陰影

固定在頁面頂部的導航列加上底邊陰影，可以把導航區域和下方內容清楚區分開來。如果你同時也在做 CSS 3D 書本效果 之類的視覺特效，陰影的一致性就很重要，建議統一使用相同的陰影參數。

.navbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

彈跳視窗浮起效果

Modal 或 Dialog 彈跳視窗需要清楚地在頁面中「浮起來」，多層陰影可以讓這個效果更真實。

.modal {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

進階 box-shadow 技巧

多層陰影疊加

box-shadow 支援用逗號分隔多組陰影值，這是讓陰影看起來更自然的關鍵。把兩到三組不同透明度、不同模糊半徑的陰影疊加在一起，效果會比單一陰影好很多：

.elegant-shadow {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.07);
}

inset 內陰影應用

inset 陰影模擬元素被按壓或凹陷的效果，常用於輸入框、按壓狀態的按鈕或需要營造深度感的 UI 元件。

.input-field {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

搭配 CSS transition 製作動態陰影

把 box-shadow 和 CSS transition 結合，就能讓陰影在 hover 時平滑變化。不過陰影變化涉及瀏覽器重新繪製（repaint），如果頁面上有大量元素同時做陰影動畫，在低階裝置上可能造成卡頓。建議搭配 網站速度測試工具 和 WordPress 加速指南 來確認效能。啟用 GZIP 壓縮 和運用 WordPress 速度優化技巧 也能改善整體體驗。

CSS 變數統一管理陰影

當網站有多個地方用到陰影時，用 CSS 變數（Custom Properties）統一管理會更方便維護。只要修改一個變數值，所有使用該變數的陰影就會一起更新：

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

其他免費 CSS 工具推薦

如果你覺得 CSS box-shadow examples 好用，以下同樣免費的 CSS 工具也值得收藏，能幫你完成更多網頁視覺設計工作。

• CSS Background Patterns：超過 21 種免費 CSS 背景圖案樣式，可即時預覽和調整顏色，一鍵複製 CSS 程式碼。
• Heroicons.dev：176+ 個免費開源圖示，一鍵複製 SVG 格式程式碼，適合搭配陰影效果使用。
• SVG Repo：超過 300,000 個免版權可商用的 SVG 圖標集。
• Imagify：線上圖片壓縮工具，三種壓縮等級幫你減少圖片檔案大小，也提供 WordPress 外掛。
• Cool Backgrounds：免費背景產生器，快速建立抽象、多線條、漸變等豐富背景。
• SVG Waves：線上波浪圖片產生器，可客製化波浪外觀和顏色。

CSS Scan 的瀏覽器擴充功能本身也是值得投資的工具，能讓你在任何網頁上即時檢查元素的 CSS 樣式、hover 狀態和響應式佈局，然後一鍵複製完整的 CSS 程式碼。搭配 GiftofSpeed 網站速度檢測，就能在設計和效能之間取得平衡。

如何在 WordPress 網站中使用自訂 CSS 陰影

很多 WordPress 使用者知道 box-shadow 好用，但不確定 CSS 程式碼該放在哪裡。以下介紹三種方法，從最簡單到最進階。

透過 WordPress 自訂器加入 CSS

這是最簡單也最安全的方式。進入 WordPress 後台，前往「外觀 > 自訂 > 額外 CSS」（Appearance > Customize > Additional CSS），把 box-shadow CSS 程式碼貼在這裡。修改會即時預覽，而且不會因為佈景主題更新而被覆蓋。無論你是使用 Bluehost 主機架設 WordPress 或 Kinsta 高品質主機，後台操作流程都一樣。

透過子主題的 style.css

如果你有使用子主題（Child Theme），直接把 CSS 寫在子主題的 style.css 中是更好的做法。所有自訂樣式集中在一個檔案裡，方便管理和維護。關於子主題的設定，可以參考 如何挑選 WordPress 主題 這篇文章的相關說明。

在 Gutenberg 區塊編輯器中套用 CSS

使用 Gutenberg 區塊編輯器時，可以在任何區塊的進階設定中加入「額外的 CSS 類別」，然後在自訂 CSS 或子主題中針對這個類別撰寫 box-shadow 樣式，這樣可以針對單一區塊精確控制陰影效果。如果你還不習慣 Gutenberg，可以參考 Gutenberg 編輯器說明。選擇一個好的主機環境也很重要，WordPress 虛擬主機推薦懶人包 裡面有完整的比較資訊，SiteGround 也是值得參考的選擇。

CSS box-shadow 常見問題 FAQ

CSS box-shadow 支援哪些瀏覽器？

截至 2026 年 5 月，box-shadow 在所有主流瀏覽器都有完整支援：Chrome 10+、Edge 12+、Firefox 4+、Safari 5.1+、Opera 10.5+，行動裝置瀏覽器也全面支援。全球支援率超過 99%（資料來源：Can I Use）。唯一的例外是非常舊的 IE8 及更早版本，但在目前的網頁開發環境中幾乎不需要擔心這個問題。搭配 Cloudflare CDN 使用可以進一步加快 CSS 檔案的載入速度。

box-shadow 和 text-shadow 有什麼不同？

box-shadow 是針對整個元素的外框加上陰影，text-shadow 則是針對文字本身加上陰影。兩者語法相似，但 box-shadow 多了 spread-radius 和 inset 兩個參數。要讓按鈕、卡片或區塊有陰影，用 box-shadow；要讓文字有陰影，用 text-shadow。

如何讓陰影只在元素下方出現？

把 offset-y 設為正值（讓陰影向下移動），同時把 spread-radius 設為負值（讓陰影的左右和上方收縮）：

box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.3);

CSS Scan 的 box-shadow 範例可以免費商用嗎？

可以。CSS box-shadow examples 頁面上的所有陰影樣式都是免費提供的，沒有版權限制，可以自由使用於個人或商業專案。不過 CSS Scan 瀏覽器擴充功能本身是付費工具，只有這個範例頁面是免費的。如果你需要更多免費的網頁設計資源，免費圖庫懶人包 和 Freebiesbug 設計素材庫 都是很好的選擇。想做更多網頁視覺設計的話，DesignCap 線上設計工具 和 DesignEvo Logo 設計 也能幫你完成其他設計需求。

為什麼我的 box-shadow 沒有顯示？

常見原因有四個：一是父元素設定了 overflow: hidden，導致陰影被裁切掉；二是 z-index 層級問題，陰影被相鄰元素蓋住；三是表格的 border-collapse: collapse 會讓 box-shadow 失效；四是陰影顏色透明度太低或忘記設定顏色。逐一檢查這些問題，通常就能找到原因。

有哪些線上工具可以幫助產生 box-shadow？

CSS box-shadow examples 是最受歡迎的預設樣式庫。如果你想要自己細調每個參數，可以使用 CSSmatic 或 CSS Gen 等線上 box-shadow 產生器，透過視覺化介面即時調整。在顏色選擇上，Tint and Shade 色調陰影產生器 可以幫你產生同色系的深淺變化。Blobs 圖形產生器 也可以搭配陰影效果使用，產生更有設計感的視覺元素。

如果你需要為網站加入更多圖標元素，Iconpie 網站圖標產生器、Simple Icons 品牌圖標、Remix Icon 開源圖標庫、Tabler Icons 和 Feather Icons 都是實用的免費資源。搭配 SVGOMG SVG 壓縮工具 和 SVG Favicon 製作工具，可以處理更多前端視覺相關的工作。

Pin

CSS box-shadow examples by CSS Scan 評價推薦心得

• 提供 95 種 Box-shadow CSS 陰影樣式
• 可一鍵複製 CSS 程式碼
• 完全免費，無須註冊
• 支援商業用途，無版權限制
• 適合前端開發者與 WordPress 使用者

不管你是剛開始學 CSS 的初學者，還是有多年經驗的前端開發者，CSS box-shadow examples 都是一個值得加入書籤的實用工具。從 95 種陰影樣式中找到靈感，再根據自己的需求微調參數，就能快速為網站加上專業質感的陰影效果。如果你正在建置新的 WordPress 網站，Hostinger 主機教學 或 網域註冊教學 都能幫你踏出正確的起步。對於已經上線的網站，搭配 On-page SEO 優化 和 結構化資料測試工具，讓網站不只好看，也能在搜尋引擎中取得更好的排名。

善用 CSS 的各種工具，包括陰影、漸層、背景樣式和圖標資源，能讓你在不依賴設計師的情況下做出具有專業視覺效果的網站。重點是理解每個 CSS 屬性的原理，再搭配好的工具來加速開發流程。如果你對前端開發工具有興趣，也可以看看 GrayGrids 免費 Bootstrap 主題 或 WordPress WebP 圖片格式 的教學。選擇一個穩定的主機也是基礎，InstaWP 測試環境 可以讓你免費建立 WordPress 測試站來練習 CSS 修改，DemosWP 也是類似的快速建站工具。