we can do a lot with text shadow effects in CSS, but it can be difficult to know exactly what’s possible. Get help with these visual examples
Some example are shown below
HTML
<h1 class=”mystic”>Mystic</h1>
<h1 class=”testShadow”>Monoton</h1>
<h1 class=”bungee”>Bungee</h1>
<h1 class=”radioactive”>Radioactive</h1>
<h1 class=”sprint”>Sprint</h1>
<p class=”prickly”>Prickly</p>
<p class=”codystar”>Codystar</p>
<h1 class=”kingdom kingdom–shadow” data-text=”kingdom”>Kingdom</h1>
<div class=”elegant”>
<span>s</span>
<span>h</span>
<span>r</span>
<span>a</span>
<span>d</span>
<span>d</span>
<span>h</span>
<span>a</span>
</div>
CSS
.mystic {
font-family: ‘Bowlby One’, cursive;
color: rgba(255, 255, 255, 0.596);
text-shadow: 20px 0px 10px rgb(0, 0, 0);
}
.testShadow {
font-family: ‘Monoton’, cursive;
font-size: 15rem;
color: rgb(255, 0, 0);
opacity: 0.5;
text-shadow: 0px -78px rgb(255, 196, 0);
}
.bungee {
font-family: ‘Bungee Shade’, cursive;
color: rgb(160, 12, 12);
opacity: 0.9;
text-shadow: -18px 18px 0 rgb(66, 45, 45);
}
.radioactive {
font-family: ‘Rampart One’, cursive;
color: rgb(97, 214, 43);
<em>opacity: 0.6;</em>
text-shadow: -18px -18px 20px rgb(87, 255, 9);
}
.sprint {
font-family: ‘Faster One’, cursive;
font-size: 10rem;
color: rgba(255, 0, 242, 0.322);
text-shadow: -20px -108px 0px rgba(255, 255, 255, 0.445);
letter-spacing: 1rem;
position: relative;
}
.sprint::after {
content: ‘sprint’;
position: absolute;
top: 215px;
right: 300px;
}
.prickly {
font-family: ‘Eater’, cursive;
text-shadow: -18px -18px 2px #777;
}
.codystar {
font-family: ‘Codystar’, cursive;
font-weight: bold;
color: rgb(55, 58, 255);
text-shadow: 1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255);
}
.kingdom {
color: white;
font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
font-size: 10rem;
line-height: 1;
text-align: center;
}
.kingdom–shadow::before {
color: #000;
content: attr(<em>data-text</em>);
margin-top: 0.7rem;
position: absolute;
transform: perspective(205px) rotateX(38deg) scale(0.84);
z-index: -1;
}
.elegant {
font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
font-size: 10rem;
letter-spacing: -1rem;
color: white;
text-shadow: -18px 8px 18px #b4bbbb;
}