JSFiddle - React, Tailwind, and code Playground

text shadows

by de Montalembert Jonathan

HTML

<p>Normal</p>

<p class="dropShadow">Drop Shadow</p>

<p class="stroke">Stroke</p>

<p class="outset">Outset</p>

<p class="inset">Inset</p>

<p class="block">Block</p>

<p class="glow">Glow</p>

<p class="blur">Blur</p>

<p class="doubleStroke">Double Stroke</p>

<p class="reflect">Reflect</p>

<p class="deepInset">Deep Inset</p>

<p class="gradient">Gradient</p>

<p class="blind">Blind</p>

CSS

body {
    background: #405866;
    font-family: Helvetica, Arial, sans-serif;
    color: #1c272d;
}

p {
    font-size: 300%;
    font-weight: bold;
    text-transform: uppercase;
}

.dropShadow {
    text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.6);
}

.stroke {
    color: #334651;
    text-shadow: -2px -2px 0px #1c272d, 2px -2px 0px #1c272d, 2px 2px 0px #1c272d, -2px 2px 0px #1c272d;
}
.outset {
    color: #334651;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6), -1px -1px 1px rgba(255, 255, 255, 0.2);
}

.inset {
    color: #334651;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6), 1px 1px 1px rgba(255, 255, 255, 0.2);
}

.block {
    color: #334651;
    text-shadow: -1px 0px #233038, 0px -1px #233038, 1px -2px #233038, 2px -3px #233038, 3px -4px #233038, 4px -5px #233038, 5px -6px #233038,
    0px 1px #233038, 1px 0px #233038, 2px -1px #233038, 3px -2px #233038, 4px -3px #233038, 5px -4px #233038, 6px -5px #233038;
}

.glow {
    color: #edf8ff;
    text-shadow: 0 0 2em #edf8ff, 0 0 1em #edf8ff, 0 0 0.3em #edf8ff;
}

.blur {
  color: transparent;
  text-shadow: 0 0 0.25em #1c272d;
}

.doubleStroke {
    color: #334651;
    -webkit-text-stroke: 2px #719eb6;
    text-shadow: -2px -2px 0px #1c272d, 2px -2px 0px #1c272d, 2px 2px 0px #1c272d, -2px 2px 0px #1c272d;
}

.reflect {
    margin-bottom: 2em;
    -webkit-box-reflect: below  -0.56em -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.9)));
}

.deepInset {
    background-color: #1b252b;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(51, 70, 81, 0.5);
}

.gradient {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e5864), color-stop(0.48, #2a3b44), color-stop(0.48, #233339), color-stop(1, #161f23));
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px #151d21;
}

.blind {
    background-image: -webkit-gradient(linear, left top, left bottom,...

JavaScript

/*
    Source: http://jsdo.it/grfxdsgn/fNbD    
*/