Text Stroke

Text stroke works with .text-stroke-{color} class. .text-stroke-{width} is optional and default text-stroke-width is 2px with .text-stroke-{color}.



Note: To make hollow text use .text-fill-transparent class

Width

Set the border of text using shorthand class .text-stroke-{width}.

Property Class
-webkit-text-stroke-width: 4px .text-stroke-4
-webkit-text-stroke-width: 3px .text-stroke-3
-webkit-text-stroke-width: 2px .text-stroke-2
-webkit-text-stroke-width: 1px .text-stroke-1
-webkit-text-stroke-width: 0px .text-stroke-0

NEVER QUIT

<h1 class="... text-stroke-4...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-3...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-2...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-1...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-0...">NEVER QUIT</h1>

Color

Set the stroke color of text using shorthand class .text-stroke-{color}.

NEVER QUIT

<h1 class="... text-stroke-white...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-red...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-yellow-light...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-green...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-stroke-blue...">NEVER QUIT</h1>

Fill

Set the stroke color of text using shorthand class .text-stroke-{color}.

NEVER QUIT

<h1 class="... text-fill-transparent...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-fill-red...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-fill-yellow-light...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-fill-green...">NEVER QUIT</h1>

NEVER QUIT

<h1 class="... text-fill-blue...">NEVER QUIT</h1>