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

CSS box-shadow examples by CSS Scan 是一個收錄了超過 95 種免費 Box-shadow CSS 陰影樣式的線上資源庫，所有陰影效果都能夠直接點擊複製 CSS 程式碼，貼上就能套用到你的網站中。對於不熟悉 CSS 語法的人來說，這個工具省去了自己調參數的時間；對於有經驗的前端開發者，它也是一個快速取得靈感的實用參考。

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

CSS box-shadow examples by CSS Scan 是什麼？

CSS box-shadow examples 是由 CSS Scan 團隊維護的免費線上資源。這個頁面收錄了 95 種精心設計的 CSS 陰影效果，每一種都可以直接點擊複製對應的 CSS 程式碼。不需要註冊帳號，不需要付費，打開頁面就能使用。

CSS Scan 本身是一款瀏覽器擴充功能，主要功能是讓使用者能夠即時檢查和複製任何網站的 CSS 樣式。而這個 box-shadow 頁面是他們額外提供的免費資源，把常見的好看陰影效果整理成一個方便查閱的集合。如果你平常會使用 CSS.GG 圖標庫 或 Heroicons SVG 圖標 這類前端資源，那 CSS box-shadow examples 也屬於同一類型的工具，都是幫開發者省下重複造輪子的時間。

這個工具適合幾種人：前端開發者需要快速找到適合的陰影效果、WordPress 網站經營者想用 CSS 美化網站的外觀、學生或自學者想觀摩別人是怎麼設定陰影參數的。對於已經有 網站載入速度 優化經驗的開發者來說，適度使用陰影效果可以在不影響效能的前提下，讓網站的視覺品質有很大提升。搭配其他 CSS 視覺工具一起使用，能讓網站的整體質感有很明顯的進步。

box-shadow CSS 語法完整教學

在開始使用 CSS box-shadow examples 之前，先了解 box-shadow 的語法結構會很有幫助。理解了每個參數的意義，你才能根據自己的需求去調整從網站上複製回來的程式碼。

box-shadow 的完整語法是：

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

各個參數的意義如下：

• offset-x（水平偏移）：正值讓陰影向右移動，負值向左。這個值決定了光線從哪個方向照過來。
• offset-y（垂直偏移）：正值讓陰影向下移動，負值向上。和 offset-x 搭配起來，就能模擬出不同角度的光源效果。
• blur-radius（模糊半徑）：控制陰影的模糊程度。值為 0 時陰影邊緣銳利，值越大陰影越柔和擴散。這個參數對陰影的真實感影響很大。
• spread-radius（擴展半徑）：控制陰影向外擴張或向內收縮的範圍。正值讓陰影變大，負值讓陰影縮小。預設值為 0，表示陰影大小和元素本身一致。
• color（顏色）：陰影的顏色，支援各種 CSS 色彩格式。建議使用 rgba() 格式，這樣可以同時控制透明度，讓陰影看起來更自然。如果你需要挑選顏色，可以搭配 Alwane 網站色碼分析工具 或 Colorion 調色盤產生器 來找到適合的色碼。
• inset（選填）：加上這個關鍵字後，陰影會從外部改為顯示在元素內部，產生凹陷的效果。這在製作輸入框或按鈕的內陰影時特別好用。如果你對這類設計風格有興趣，也可以參考 Neumorphism CSS Generator 新擬態產生器。

一個最簡單的 box-shadow 寫法只需要水平和垂直偏移：

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

加上模糊半徑後，效果會更柔和：

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

box-shadow 也支援一次指定多組陰影，用逗號分隔即可。這在製作層次感更豐富的陰影時很常用，後面會在進階技巧段落詳細說明。如果想進一步了解 CSS 漸層色彩搭配，可以參考 CSS Gradient 線上漸層產生器。

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

使用 CSS box-shadow examples 複製陰影樣式非常簡單，整個過程只需要三個步驟。

Step 1：開啟 CSS box-shadow examples 頁面

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

Step 2：挑選喜歡的陰影樣式

瀏覽頁面上的各種陰影效果，找到你覺得適合專案風格的樣式。頁面上的樣式從簡約的微陰影到誇張的層疊陰影都有，你可以依照設計需求來選擇。如果是在做 WordPress 網站的調整，建議選擇偏柔和的陰影效果，搭配 WordPress 快取外掛 優化後的網站，整體體驗會更加流暢。

Pin

Step 3：點擊複製 CSS 程式碼

找到喜歡的樣式後，直接點擊那個陰影預覽方塊。CSS 程式碼會自動複製到你的剪貼簿中。複製的內容格式就像這樣：

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

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

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

了解語法和操作方式後，來看看 box-shadow 在實際網頁設計中的幾個常見應用場景。這些範例可以幫助你更快地把從 CSS box-shadow examples 複製回來的程式碼套用到正確的地方。每一種場景都附上對應的 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：線上波浪圖片產生器，可客製化波浪外觀和顏色，產生 SVG 和 PNG 格式。

CSS Scan 的瀏覽器擴充功能本身也是一個值得投資的工具。它能讓你在任何網頁上即時檢查元素的 CSS 樣式、hover 狀態和響應式佈局，然後一鍵複製完整的 CSS 程式碼。對於前端開發者來說，這比開瀏覽器的開發者工具還要方便快速。如果你平常需要檢查其他網站的設計手法，CSS Scan 會是很有效率的輔助工具。在搭配好的開發工具和 GiftofSpeed 網站速度檢測 之後，就能在設計和效能之間取得平衡。

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

很多 WordPress 使用者知道 box-shadow 好用，但不確定該把 CSS 程式碼放在哪裡。以下介紹幾種在 WordPress 中加入自訂 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 支援哪些瀏覽器？

box-shadow 的瀏覽器支援非常廣泛。所有主流瀏覽器（Chrome、Firefox、Safari、Edge）都完整支援，包括行動裝置上的瀏覽器。唯一不支援的是非常舊的 IE8 及更早版本。基本上在 2026 年的網頁開發環境中，你不需要擔心 box-shadow 的瀏覽器相容性問題。搭配 Cloudflare CDN 使用可以進一步加快 CSS 檔案的載入速度。

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

box-shadow 是針對整個元素的外框加上陰影，而 text-shadow 則是針對文字本身加上陰影。兩者的語法很相似，但 box-shadow 多了 spread-radius 和 inset 這兩個參數。如果你想要讓文字有陰影效果，使用 text-shadow；想要讓按鈕、卡片或整個區塊有陰影，使用 box-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 瀏覽器擴充功能本身是付費工具，只有 box-shadow 這個範例頁面是免費的。如果你需要更多免費的網頁設計資源，免費圖庫懶人包 和 Freebiesbug 設計素材庫 都是很好的選擇。想進一步做網頁視覺設計的話，DesignCap 線上設計工具 和 DesignEvo Logo 設計 也能幫你完成其他設計需求。

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

有幾個常見原因會導致 box-shadow 看不到。一是父元素設定了 overflow: hidden，導致陰影被裁切掉。二是元素的 z-index 層級問題，陰影可能被相鄰元素蓋住了。三是表格的 border-collapse: collapse 屬性會讓 box-shadow 失效。四是忘記給陰影設定顏色或透明度太低。逐一檢查這些問題，通常就能找到原因。如果你是用 WordPress，建議搭配 SEO 外掛 和了解 SEO 基礎概念，讓網站整體品質一起提升。

如何用 CSS 變數統一管理陰影效果？

在 :root 中定義幾個層級的陰影變數（例如 --shadow-sm、--shadow-md、--shadow-lg），然後在需要的地方使用 var(--shadow-md) 來引用。這樣做的好處是未來想要統一調整陰影風格時，只需要改一個地方。如果你同時也在處理字體相關的 CSS，可以參考 思源黑體 Noto Sans TC 的 Web Font 設定方式，讓文字樣式也統一管理。在主機選擇上，Bluehost 和 A2 Hosting 的方案都支援完整的 CSS 自訂功能，可以納入考量。

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

CSS box-shadow examples 是其中最受歡迎的，但它只提供預設的樣式讓你挑選。如果你想要自己細調每個參數，可以使用 CSSmatic 或 CSS Gen 等線上 box-shadow 產生器，透過視覺化介面即時調整陰影效果。在顏色選擇上，Tint and Shade 色調陰影產生器 可以幫你產生同色系的深淺變化，用於陰影顏色搭配很方便。搭配 SVGOMG SVG 壓縮工具 和 SVG Favicon 製作工具，可以處理更多前端視覺相關的工作。Blobs 圖形產生器 也可以搭配陰影效果使用，產生更有設計感的視覺元素。

如果你需要為網站加入更多圖標元素，Iconpie 網站圖標產生器、Simple Icons 品牌圖標、Remix Icon 開源圖標庫、Tabler Icons 和 Feather Icons 都是很實用的免費資源。這些圖標搭配 box-shadow 陰影效果，可以讓網站的視覺設計更加完整。

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

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