CSS 文字陰影、發光、描邊怎麼寫？text-shadow 與 text-stroke 常用效果整理（附程式碼）

活動標題、首頁大字想做得醒目一點，很多人會在繪圖軟體做成圖片再放上網站。這樣做有幾個麻煩：搜尋引擎讀不到圖片裡的字、手機放大會糊、要改一個字就得重做一張圖。

這些效果大部分用 CSS 就做得出來，字還是字，可以選取、可以被搜尋，改文字也只要改 HTML。這篇整理最常用的 9 種，每段程式碼都可以直接複製。

text-shadow 的寫法

text-shadow: 水平位移 垂直位移 模糊程度 顏色;

• 水平位移：正數往右，負數往左。
• 垂直位移：正數往下，負數往上。
• 模糊程度：0 是邊緣清楚的硬陰影，數字越大越散。
• 顏色：建議用半透明，例如 rgb(0 0 0 / 35%)，比純灰色自然。

要疊好幾層陰影，用逗號隔開就好，先寫的那層會疊在上面。另外，text-shadow 沒有「擴散」這個值，這點和 box-shadow 不一樣，想讓光暈變大只能加大模糊值，或多疊幾層。

1. 基本陰影：讓標題浮起來

.shadow-basic {
  color: #1e8a8a;
  text-shadow: 2px 2px 4px rgb(0 0 0 / 35%);
}

往右下偏 2px、模糊 4px，標題看起來稍微離開背景。偏移不要太大，中文筆畫多，影子拉太遠字會變得不清楚。

2. 照片上的白字：疊兩層才看得清楚

橫幅照片上放白色標題，照片亮的地方字就消失了。疊一層貼近的陰影、一層大範圍的柔光：

.on-photo {
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 60%), 0 0 12px rgb(0 0 0 / 35%);
}

第一層把筆畫邊緣描清楚，第二層在字的周圍壓暗一圈。照片很花的話，還是建議在照片上蓋一層半透明的深色，比只靠陰影穩定。

3. 霓虹發光

深色背景上，用同一個顏色疊幾層、模糊值一層比一層大，就是霓虹燈的效果：

.neon {
  color: #e9ffff;
  text-shadow:
    0 0 2px #fff,
    0 0 8px #2ee6e6,
    0 0 18px #2ee6e6,
    0 0 36px #1e8a8a;
}

• 最內層用白色、模糊很小，讓字的中心看起來最亮。
• 外面幾層換成主色，越外層越暗、越散。
• 字本身用很淡的顏色（接近白），不要用飽和的主色，不然看起來不像在發光。

這個效果只適合深色背景。放在白底上，光暈會變成一團模糊的色塊。

4. 立體字：疊很多層不模糊的陰影

.solid-3d {
  color: #ff6b35;
  text-shadow:
    1px 1px 0 #c94d1f,
    2px 2px 0 #c94d1f,
    3px 3px 0 #c94d1f,
    4px 4px 0 #c94d1f,
    5px 5px 0 #c94d1f,
    6px 6px 12px rgb(0 0 0 / 30%);
}

每層往右下多移 1px、模糊值都是 0，連起來就像字的側面。側面顏色用比字深一點的同色系，最後一層再加一個柔和的影子落在背景上。想要更厚，就多加幾層。

5. 壓印字：像蓋在紙上

.letterpress {
  background: #9fb3b3;
  color: #5a6e6e;
  text-shadow: 0 1px 0 rgb(255 255 255 / 55%);
}

字的顏色比背景深一點，再往下放一條 1px 的白色亮邊，看起來像壓進去的凹字。這個效果要背景是中間色調才明顯，白底或黑底都做不出來。

6. 描邊：-webkit-text-stroke

給文字加外框，現在不用再靠陰影湊，直接用 -webkit-text-stroke：

.stroke {
  color: #fff;
  -webkit-text-stroke: 3px #1e8a8a;
}

雖然名字前面有 -webkit-，Chrome、Edge、Safari、Firefox 都支援這個寫法，照抄就好。

中文字的描邊會把字吃掉

實際測試會發現，像「描」「邊」這種筆畫多的粗體中文字，加了 3px 描邊之後，筆畫中間的白色幾乎不見了，整個字糊成一團。原因是描邊畫在筆畫邊線的正中間，一半往外、一半往內，往內的那一半就把筆畫蓋掉了。

解法是加 paint-order: stroke fill，讓瀏覽器先畫描邊、再把字疊上去，往內的那一半就被字蓋住：

.stroke-behind {
  color: #fff;
  -webkit-text-stroke: 0.12em #1e8a8a;
  paint-order: stroke fill;
}

• 因為往內的一半被蓋住了，看得到的描邊只剩一半，所以粗細要設成原本想要的兩倍左右。
• 粗細改用 em 當單位，字在手機上變小時，描邊也會跟著變細。用固定的 px，手機上的小字很容易又被描邊吃掉。

空心字

字的顏色設成透明，只留描邊，就是空心字：

.stroke-hollow {
  color: transparent;
  -webkit-text-stroke: 2px #1e8a8a;
}

空心字比較適合英文、數字或筆畫少的大字。測試時用的中文字型，有些字（例如「空」「字」）筆畫交叉的地方會多出幾條線，那是字型本身的筆畫重疊，換字型才會改善。

7. 用陰影做外框（舊寫法）

早期 -webkit-text-stroke 還不普及時，常見的做法是往八個方向各放一層陰影：

.outline-by-shadow {
  color: #fff;
  text-shadow:
    -2px -2px 0 #1e8a8a,  2px -2px 0 #1e8a8a,
    -2px  2px 0 #1e8a8a,  2px  2px 0 #1e8a8a,
     0   -2px 0 #1e8a8a,  0    2px 0 #1e8a8a,
    -2px  0   0 #1e8a8a,  2px  0   0 #1e8a8a;
}

外框在 2px 以內看起來還可以，再粗轉角就會出現鋸齒。現在建議用第 6 種的 paint-order 寫法，這段留著是讓你看到舊網站的程式碼時認得出來。

8. 漸層字

.gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, #1e8a8a, #ff6b35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

做法是把漸層背景「剪」成文字的形狀，再把字本身變透明。有兩個容易踩到的地方：

• 一定要加 display: inline-block。標題是區塊元素，背景會鋪滿整行的寬度，字只佔左邊一小段的話，只會拿到漸層最左邊的顏色，看不出是漸層。改成 inline-block，背景寬度就剛好等於字的寬度。
• 字是透明的。萬一瀏覽器不支援 background-clip: text，使用者會看到一片空白。比較保險的寫法是用 @supports，不支援時退回單一顏色：

.gradient-safe {
  color: #1e8a8a;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-safe {
    display: inline-block;
    background: linear-gradient(90deg, #1e8a8a, #ff6b35);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

漸層字不要再加 text-shadow

漸層字想加影子，直接寫 text-shadow 會讓整個字變髒、變暗：陰影是畫在漸層上面的，字本身又是透明的，擋不住它。要改用 filter: drop-shadow()，它是照著已經畫好的形狀在後面加影子：

.gradient-shadow {
  filter: drop-shadow(3px 3px 3px rgb(0 0 0 / 30%));
}

HTML 寫成 <h2 class="gradient-text gradient-shadow">標題</h2>，兩個 class 一起用。

9. 呼吸發光動畫

讓光暈慢慢變亮再變暗，適合活動頁的主標題：

.glow-pulse {
  color: #e9ffff;
  animation: glow-pulse 2.4s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from { text-shadow: 0 0 4px #2ee6e6; }
  to   { text-shadow: 0 0 6px #fff, 0 0 20px #2ee6e6, 0 0 40px #1e8a8a; }
}

@media (prefers-reduced-motion: reduce) {
  .glow-pulse {
    animation: none;
    text-shadow: 0 0 6px #fff, 0 0 20px #2ee6e6;
  }
}

• alternate 讓動畫播完倒著播回來，亮暗之間就不會突然跳回去。
• 最後一段是給在手機或電腦設定裡開了「減少動態效果」的人：不播動畫，直接顯示固定的發光。實際把這個設定打開測試，動畫確實停了，光暈也還在。

放到 WordPress 網站

1. 把需要的 CSS 貼到 外觀 → 自訂 → 附加的 CSS。區塊佈景主題（例如 Twenty Twenty-Five）沒有「自訂」，改到 外觀 → 編輯器 → 樣式，在樣式面板的「更多」選單裡找「附加的 CSS」。
2. 在文章或頁面裡點選要套用的標題區塊，右側區塊設定最下面的「進階設定」，在「附加的 CSS 類別」填上 class 名稱，例如 neon（不用加點）。

使用時要注意

• 只用在標題和大字。內文加陰影會讓字變粗、變糊，長時間閱讀很累。
• 陰影不能取代對比。淺色字放在淺色背景上，加了陰影還是很難讀，先把字和背景的顏色對比拉開。
• 一頁不要用太多種。標題有發光、按鈕有立體、內文又有描邊，畫面會很亂。挑一兩種當網站的固定風格就好。
• 動畫不要多。會動的 text-shadow 每一格畫面都要重畫，一頁一兩個沒問題，整頁都在閃，比較舊的手機會變卡。

延伸閱讀

• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
• CSS 流動漸層邊框怎麼做？會變色的彩色外框寫法（支援圓角，附程式碼）
• CSS 漂亮底線寫法：螢光筆標記、滑過展開的連結底線與 text-decoration 新屬性

標題字做得好，網站一打開就有記憶點。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計，台北與全台的客戶也都有合作，歡迎來聊聊。