CSS 陰影產生器

功能簡介

CSS 陰影產生器讓你直觀地調出陰影，再複製最終的 box-shadow 宣告。可以疊加任意多層陰影，為每一層設定偏移、模糊、擴展、顏色和不透明度，或切換成內陰影，預覽會立即更新。也可以貼上既有的 box-shadow 值，以視覺化方式繼續編輯。所有操作都在瀏覽器中完成。

使用方法

1. 從某個預設開始，或沿用範例陰影。
2. 用「圖層」按鈕選擇要編輯的圖層，或按「新增圖層」再疊加一層。
3. 拖動「水平偏移」「垂直偏移」「模糊」「擴展」，選擇「顏色」，調低「不透明度」讓陰影更柔和。開啟「內陰影」得到內部陰影。
4. 調整預覽的「方塊顏色」「背景」和「圓角」，讓它與你的頁面一致。這些只影響預覽。
5. 從「CSS」卡片複製程式碼。

底部的「陰影 CSS」框可以編輯：把樣式表或設計工具裡的陰影貼進去，上方的控制項會自動讀取。rem 和 em 單位以 16px 換算成 px。

範例

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

讓陰影更自然的技巧

• 不透明度要低。 5%–25% 的黑色看起來真實；純深色陰影顯得沉重。
• 負的擴展值 可以避免大模糊從兩側溢出，大多數「卡片」陰影都用這個技巧。
• 為陰影加點顏色。 帶一點背景色或品牌色的陰影比純灰色更有質感。
• 光源方向一致。 每一層的垂直偏移都保持為正，所有陰影就會認同同一個光源方向。
• 注意效能。 大量元素上的大模糊會讓低階手機捲動變卡；做動畫時改變透明度或 transform，而不是陰影本身。