Text Effects

Text shadows, strokes, highlights, decorative underlines, letter-spacing and line-height shorthands.

Text shadow

text-shadow= variants

Shadow sm — subtle lift

Shadow md — clear depth

Shadow lg — strong depth

Retro layered shadow

<h2 text-shadow="sm">Subtle shadow</h2>
<h2 text-shadow="lg">Strong shadow</h2>
<h2 text-shadow="retro">Retro shadow</h2>
<h2 text-shadow="glow" tone="primary">Glow shadow</h2>

Text stroke (outline text)

Stroke widths

Thin stroke

Thick stroke

Hollow gradient

<h2 text-stroke="sm">Thin outline</h2>
<h2 text-stroke="lg">Thick outline</h2>

<!-- Hollow text (stroke only) -->
<h2 text-stroke="xl" text-hollow text-gradient="brand">Hollow</h2>

Highlight

Marker-style highlight

This is highlighted text in a sentence.

A warning highlight draws attention.

Success achievement unlocked milestone.

<span highlight tone="primary">highlighted text</span>
<span highlight="warning">warning style</span>
<span highlight="success">success style</span>

Decorative underlines

underline= variants

Wavy underline using currentColor

Dotted underline style

Thick underline for emphasis

Grow on hover →

<span underline="wavy" tone="primary">Wavy</span>
<span underline="dotted">Dotted</span>
<span underline="thick">Thick</span>
<a href="#" underline="grow">Grows on hover →</a>

Letter-spacing & line-height

tracking= and leading=

Tight tracking (-0.05em)

Wide tracking (0.05em)

Widest tracking (0.2em)

Loose line height (2.0) for very airy text that breathes and has lots of space between each line. Great for display text.

<h2 tracking="tight">Tight</h2>
<h2 tracking="wide">Wide</h2>
<p tracking="widest">SPACED OUT</p>

<p leading="tight">Tight line height 1.25</p>
<p leading="relaxed">Relaxed line height 1.625</p>
<p leading="loose">Loose line height 2</p>

All values

text-shadow="sm|md|lg|xl|glow|color|retro|none"
text-stroke="sm|md|lg|xl"   + text-hollow (transparent fill)
highlight  highlight="danger|success|warning"
underline="wavy|dotted|thick|offset|grow"
indent="sm|md|lg"
tracking="tight|normal|wide|wider|widest"
leading="none|tight|snug|normal|relaxed|loose"