重點整理
CSS box-shadow examples 是 CSS Scan 提供的免費陰影範例頁，2026 年 10 月標示收錄 95 組 box-shadow 樣式，不少是參考 Stripe、Tailwind CSS、Material、Airbnb 等網站的陰影。用法很簡單：打開網頁、點一下喜歡的卡片，該樣式的 box-shadow 程式碼就會複製到剪貼簿，貼進 CSS 即可。
網頁上的卡片、按鈕、圖片區塊看起來太平，加一點陰影就能做出層次。但 box-shadow 有好幾個數值，要調出自然又好看的陰影並不容易。這篇先用最短的篇幅說明 box-shadow 語法，再示範用 CSS box-shadow examples 直接挑現成樣式、一鍵複製的方法。
CSS box-shadow 語法怎麼看？
一組陰影的寫法是：
box-shadow: 水平位移 垂直位移 模糊半徑 擴散半徑 顏色;
- 水平／垂直位移：正數往右、往下，負數往左、往上。
- 模糊半徑：數字越大，陰影邊緣越柔和。
- 擴散半徑（可省略）：正數讓陰影變大，負數讓陰影縮小。
- 顏色：常用
rgba()設半透明，例如rgba(0, 0, 0, 0.1)。 - 前面加
inset會變成內陰影；用逗號隔開可以疊加多組陰影，做出更真實的效果。
CSS box-shadow examples 是什麼？
CSS box-shadow examples 是 CSS Scan（一款付費的 CSS 檢查擴充功能）製作的免費範例頁，把各種陰影做成一張張白色卡片排列，捲動就能比較效果，每張卡片標有編號，部分還註明參考來源。陰影範例頁本身免費使用，頁面上的「Get CSS Scan」是推銷另一個付費工具，不需要購買。
CSS box-shadow examples 使用教學
步驟一：開啟網站，往下捲動瀏覽陰影樣式
進入 getcssscan.com/css-box-shadow-examples，往下捲動就能看到所有陰影卡片，從很淡的細邊陰影到明顯的浮起效果都有。
步驟二：點擊喜歡的樣式，複製 CSS
點一下卡片，畫面會提示已複製，該樣式的程式碼就在剪貼簿裡。
步驟三：把程式碼貼到你的 CSS
複製下來的是一行 box-shadow 宣告，例如下圖。把它貼到要加陰影的選擇器裡（WordPress 可放在「外觀 → 自訂 → 額外 CSS」），再依需要調整顏色透明度。
例如替卡片加陰影：.my-card { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }。
常見問題
CSS box-shadow examples 要付費嗎？
不用，陰影範例頁免費瀏覽與複製，也不用註冊；頁面上推銷的 CSS Scan 擴充功能才是付費產品，與複製陰影無關。
box-shadow 可以只加在下方嗎？
可以，把水平位移設 0、垂直位移設正數，再用負的擴散半徑把左右兩側收進去，例如 box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);。
box-shadow 和 drop-shadow 有什麼不同？
box-shadow 是依元素的矩形外框（含圓角）產生陰影；filter: drop-shadow() 則會沿著圖片的實際形狀，適合去背 PNG 或 SVG 圖示。
結語
CSS box-shadow examples 把 95 組現成陰影整理在同一頁，點一下就能複製，比自己一個數值一個數值調整快得多。先挑一個接近的樣式貼上，再依網站配色微調顏色與透明度就好。想替區塊背景也加點變化，可以參考 CSS Background Patterns 背景樣式產生器。