text-shadow
Adds shadows to text. Similar to box-shadow but applies only to text. Pattern: ts{X}px-{Y}px-{B}px-{HEX}.
Class List
| Class | CSS | Description |
|---|---|---|
tsn | text-shadow: none | Remove shadow |
tsinh | text-shadow: inherit | parent text-shadow inheritance |
tsini | text-shadow: initial | Reset to initial value |
tsu | text-shadow: unset | Inherit or initial value |
ts{X}px-{Y}px-{B}px-{HEX} | text-shadow: Xpx Ypx Bpx #HEX | X offset, Y offset, blur, color |
ts{X}px-{Y}px-{B}px-{R}-{G}-{B}-{A} | text-shadow: Xpx Ypx Bpx rgba() | RGBA color format |
Visual Comparison
Compares text with various text-shadow values.
Light shadow — ts1px-1px-2px-000000
Hello World
Medium shadow — ts2px-2px-4px-000000
Hello World
Heavy shadow — ts3px-3px-6px-000000
Hello World
Indigo glow — ts0px-0px-10px-6366F1
Hello World
Strong glow — ts0px-0px-20px-6366F1
Hello World
No shadow (tsn) — tsn
Hello World
Pattern Syntax
The text-shadow pattern connects 4 values with hyphens.
| Component | Meaning | Example |
|---|---|---|
| {X}px | Horizontal offset (positive: right) | 2px |
| {Y}px | Vertical offset (positive: down) | 2px |
| {B}px | Blur radius (0 for sharp shadow) | 4px |
| {HEX} | 6-digit HEX color | 000000 |
<!-- Pattern format -->
<!-- ts{Xoffset}px-{Yoffset}px-{blur}px-{Color} -->
<p class="ts2px-2px-4px-000000">X:2px Y:2px blur:4px black</p>
<!-- Glow (offset 0, blur only) -->
<p class="ts0px-0px-10px-6366F1 c6366F1">Neon glow</p>Neon Glow Effect
Using large blur values with bright colors creates a neon glow effect.
Indigo
Blue
Red
Green
Code Examples
<!-- Default Text Shadow -->
<h1 class="ts2px-2px-4px-000000 cFAFAFA fs3-2rem fw800">
Title Text
</h1>
<!-- Neon glow effect -->
<p class="ts0px-0px-10px-6366F1 c6366F1 fs2-4rem fw700">
Neon Glow
</p>
<!-- Remove shadow -->
<p class="tsn">Text without shadow</p>
<!-- Glow on hover (combined with transition) -->
<h2 class="cFAFAFA fs2rem fw700 tsn hover-ts0px-0px-10px-38BDF8 tall200msease cp">
Glows on hover
</h2>Tips & Notes
Difference from box-shadow
text-shadow follows letter shapes, while box-shadow creates shadows around the element box.
RGBA colors also supported
RGBA format can be used instead of HEX. Example: ts2px-2px-4px-0-0-0-50 is a semi-transparent black shadow.
Performance Consideration
text-shadow with large blur values has high rendering cost. Applying to many elements can impact scroll performance.