Text Shadow

Soft shadows for text. Unfortunately shadows are difficult to construct using only utility classes, so these are more hard-coded than other elements. You can adjust shadow colors and some other variables within _evo_variables.scss.

text-shadow

Shadow

<h1 class="text-shadow">Shadow</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply the text-shadow class. Global style is defined in _evo_variables.scss

Shadow

<h1 class="text-shadow-inverse">Shadow</h1>

On dark backgrounds, apply the text-shadow-inverse class for a light colored shadow. Global style is defined in _evo_variables.scss

text-shadow-[thickness]

Shadow

<h1 class="text-shadow-thin">Shadow</h1>

Shadow

<h1 class="text-shadow-medium">Shadow</h1>

Shadow

<h1 class="text-shadow-thick">Shadow</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply the text-shadow class. Global style is defined in _evo_variables.scss

Shadow

<h1 class="text-shadow-thin-inverse">Shadow</h1>

Shadow

<h1 class="text-shadow-medium-inverse">Shadow</h1>

Shadow

<h1 class="text-shadow-thick-inverse">Shadow</h1>

On dark backgrounds, apply the text-shadow-inverse class for a light colored shadow. Global style is defined in _evo_variables.scss

text-shadow-[number]

text-shadow-1

Shadow

text-shadow-2

Shadow

text-shadow-3

Shadow

text-shadow-4

Shadow

text-shadow-5

Shadow

text-shadow-6

Shadow

text-shadow-7

Shadow

text-shadow-8

Shadow

text-shadow-9

Shadow

text-shadow-10

Shadow

text-shadow-11

Shadow

text-shadow-12

Shadow

text-shadow-13

Shadow

text-shadow-14

Shadow

text-shadow-15

Shadow

text-shadow-16

Shadow

text-shadow-17

Shadow

text-shadow-18

Shadow

text-shadow-19

Shadow

text-shadow-20

Shadow

<h1 class="text-shadow-20">Shadow</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-shadow-[number] class such as text-shadow-20. Global style is defined in _evo_variables.scss

inverse-text-shadow-[number]

inverse-text-shadow-1

Shadow

inverse-text-shadow-2

Shadow

inverse-text-shadow-3

Shadow

inverse-text-shadow-4

Shadow

inverse-text-shadow-5

Shadow

inverse-text-shadow-6

Shadow

inverse-text-shadow-7

Shadow

inverse-text-shadow-8

Shadow

inverse-text-shadow-9

Shadow

inverse-text-shadow-10

Shadow

inverse-text-shadow-11

Shadow

inverse-text-shadow-12

Shadow

inverse-text-shadow-13

Shadow

inverse-text-shadow-14

Shadow

inverse-text-shadow-15

Shadow

inverse-text-shadow-16

Shadow

inverse-text-shadow-17

Shadow

inverse-text-shadow-18

Shadow

inverse-text-shadow-19

Shadow

inverse-text-shadow-20

Shadow

<h1 class="inverse-text-shadow-20">Shadow</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply an inverse-text-shadow-[number] class such as inverse-text-shadow-20. Global style is defined in _evo_variables.scss