Effects

text-shadow

用於控制文字元素陰影的通用類別。

ClassStyles
text-shadow-2xs
text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) */
text-shadow-xs
text-shadow: var(--text-shadow-xs); /* 0px 1px 1px rgb(0 0 0 / 0.2) */
text-shadow-sm
text-shadow: var(--text-shadow-sm); /* 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) */
text-shadow-md
text-shadow: var(--text-shadow-md); /* 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) */
text-shadow-lg
text-shadow: var(--text-shadow-lg); /* 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */
text-shadow-none
text-shadow: none;
text-shadow-(<custom-property>)
text-shadow: var(<custom-property>);
text-shadow-(color:<custom-property>)
--tw-shadow-color var(<custom-property>);
text-shadow-[<value>]
text-shadow: <value>;
text-shadow-inherit
--tw-shadow-color inherit;

範例(Examples)

基本範例(Basic example)

使用 text-shadow-smtext-shadow-lg 等通用類別來為文字元素套用不同大小的文字陰影:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-2xs ...">The quick brown fox...</p><p class="text-shadow-xs ...">The quick brown fox...</p><p class="text-shadow-sm ...">The quick brown fox...</p><p class="text-shadow-md ...">The quick brown fox...</p><p class="text-shadow-lg ...">The quick brown fox...</p>

變更透明度(Changing the opacity)

使用透明度修飾符來調整文字陰影的透明度:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-lg ...">The quick brown fox...</p><p class="text-shadow-lg/20 ...">The quick brown fox...</p><p class="text-shadow-lg/30 ...">The quick brown fox...</p>

預設的文字陰影透明度相當低(20% 或更少),因此增加透明度(例如到 50%)會使文字陰影更加明顯。

設定陰影顏色(Setting the shadow color)

使用 text-shadow-indigo-500text-shadow-cyan-500/50 等通用類別來變更文字陰影的顏色:

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

預設情況下,彩色陰影的透明度為 100%,但你可以使用透明度修飾符來調整。

移除文字陰影(Removing a text shadow)

使用 text-shadow-none 通用類別來移除元素現有的文字陰影:

<p class="text-shadow-lg dark:text-shadow-none">  <!-- ... --></p>

使用自訂值(Using a custom value)

使用 text-shadow-[<value>] 語法,根據完全自訂的值來設定 text shadow

<p class="text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)] ...">  Lorem ipsum dolor sit amet...</p>

對於 CSS 變數,你也可以使用 text-shadow-(<custom-property>) 語法:

<p class="text-shadow-(--my-text-shadow) ...">  Lorem ipsum dolor sit amet...</p>

這只是 text-shadow-[var(<custom-property>)] 的簡寫形式,會自動為你加上 var() 函式。

響應式設計(Responsive design)

text-shadow 通用類別前面加上像 md: 這樣的中斷點變體,讓該通用類別只在中型螢幕尺寸及以上時套用:

<p class="text-shadow-none md:text-shadow-lg ...">  Lorem ipsum dolor sit amet...</p>

變體文件中了解更多關於使用變體的資訊。

自訂你的主題(Customizing your theme)

自訂文字陰影(Customizing text shadows)

使用 --text-shadow-* 主題變數來自訂專案中的 text shadow 通用類別:

@theme {  --text-shadow-xl: 0 35px 35px rgb(0, 0, 0 / 0.25); }

現在可以在標記中使用 text-shadow-xl 通用類別:

<p class="text-shadow-xl">  Lorem ipsum dolor sit amet...</p>

主題文件中了解更多關於自訂主題的資訊。

自訂陰影顏色(Customizing shadow colors)

使用 --color-* 主題變數來自訂專案中的 color 通用類別:

@theme {  --color-regal-blue: #243c5a; }

現在可以在標記中使用 text-shadow-regal-blue 通用類別:

<p class="text-shadow-regal-blue">  Lorem ipsum dolor sit amet...</p>

主題文件中了解更多關於自訂主題的資訊。

Copyright © 2026 Tailwind Labs Inc.·商標政策(Brand)