CSS text style and shadow effects

By using the CSS FONT and TEXT properties, the style of the headline and the printed text on the web page can be highlighted and beautified.

TEXT properties:

color
background-color
text-shadow
text-decoration
text-align
text-transform

FONT properties:

font-size
font-weight
font-style
font-family
font-variant

CSS text style formatting with examples

In the following examples, we will demonstrate CSS styling with text formatting by adding webkit-stroke properties and text-shadow effects.

<p class="c">CSS -webkit-text-stroke example</p>

<style>
.c {
font-size: 50px;
font-weight: bold;
text-align: center;
font-family: "Arial Black", sans-serif;
background-color: #FF4500;
-webkit-text-fill-color: blue;
-webkit-text-stroke: 2px lightgray;
}
</style>

CSS -webkit-text-stroke example

<p class="b">CSS text-shadow standard effect example</p>

<style>
.b {
text-align: center;
font-weight: bold;
font-size: 45px;
color: white;
text-shadow: 3px 3px 6px black;
}
</style>

CSS text-shadow standard effect example

<p class="m">CSS text-stroke and text-shadow combination</p>

<style>
.m {
text-align: center;
font-size: 70px;
font-weight: bold;
color: darkslategray;
background-color: #6495ED;
-webkit-text-stroke: 2px #E0FFFF;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666,
0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
</style>

CSS text-stroke and text-shadow combination

<p class="blur">CSS text-shadow blur effect example</p>

<style>
.blur {
text-align: center;
font-style: italic;
font-weight: bold;
font-size: 45px;
color: #2F4F4F;
text-shadow: 3px 3px 5px red;
}
</style>

CSS text-shadow blur effect example

<p class="a">CSS horizontal shadow example</p>
<p class="aa">CSS vertical shadow example</p>
<p class="aaa">CSS diagonally shadow example</p>

<style>
p {
font-family: "Arial Black";
text-align: center;
font-size: 45px;
color: blue;
}
.a { text-shadow: 3px 0px 0px red; }
.aa { text-shadow: 0px 3px 0px red; }
.aaa { text-shadow: 3px 3px 0px red; }
</style>

CSS horizontal shadow example

CSS vertical shadow example

CSS diagonally shadow example

<p class="neon">CSS text-shadow neon effect example</p>

<style>
.neon {
text-align: center;
font-weight: bold;
color: Coral;
font-size: 55px;
font-family: "Arial Black";
background-color: black;
-webkit-text-stroke: 2px red;
text-shadow: 0 0 10px #FF7F50, 0 0 20px #DC143C, 0 0 30px #DC143C, 0 0 40px #DC143C;
}
</style>

CSS text-shadow neon effect example

<p class="d">CSS text-shadow inset effect example</p>

<style>
.d {
text-align: center;
font-size: 60px;
font-weight: bold;
background-color: #6495ED;
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
</style>

CSS text-shadow inset effect example

<p class="angl">CSS Anaglyph Text Effect Example</p>

<style>
.angl {
position: relative;
font-size: 50px;
font-family: 'Arial Black', sans-serif;
color: lime;
}

.angl:after {
position: absolute;
content: "CSS Anaglyph Text Effect Example";
left: 1px;
top: -5px;
color: rgba(254, 0, 2, 1);
mix-blend-mode: multiply;
}
</style>

CSS Anaglyph Text Effect Example

<div id="vintage">
<p>CSS text-shadow retro effect example</p>
</div>

<style>
#vintage p {
text-align: center;
font-weight: bold;
font-size: 60px;
margin: 30px auto;
font-family: Courier;
text-transform: uppercase;
color: #2F4F4F;
text-shadow: 3px 3px 0 #eee, 4px 4px 0 #2F4F4F;
}
</style>

CSS text-shadow retro effect example

<div id="max">
<p class="g">CSS text style example</p>
<p class="h">CSS text style example</p>
</div>

<style>
#max {
background-color: #00BFFF;
}
p {
text-align: center;
font-size:55px;
font-weight: bold;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.g {
color: red;
}
.h {
color: white;
}
</style>

CSS text-shadow 3d effect example

CSS text-shadow 3D effect example

JSFiddle

<p class="abc">CSS multiple color shadow effect</p>

<style>
.abc {
text-align: center;
font-size: 50px;
color: #8A2BE2;
font-weight: bold;
text-shadow:
0 0 4px white, 0 0 5px white,0 0 6px white, 0 0 7px yellow, 0 0 8px yellow,
0 0 10px yellow, 0 0 11px yellow,0 0 12px yellow, 0 0 13px yellow, 0 0 14px yellow,
0 0 16px yellow, 0 0 17px yellow,0 0 18px yellow, 0 0 19px yellow, 0 0 20px yellow,
0 0 21px yellow, 0 0 22px yellow, 0 0 23px yellow,0 0 24px yellow,0 0 25px yellow,
0 0 26px green, 0 0 27px green, 0 0 28px green,0 0 29px green,0 0 30px green,
0 0 31px green, 0 0 32px green, 0 0 33px green,0 0 34px green,0 0 35px green,
0 0 36px green, 0 0 37px green, 0 0 38px green,0 0 39px green,0 0 40px green,
0 0 41px green, 0 0 42px green, 0 0 43px green,0 0 44px green,0 0 45px green;
}

</style>

CSS multiple color shadow effect

<p class="flame">CSS Blaze Effect Example</p>

<style>
.flame {
padding: 10px;
text-align: center;
font-size: 40px;
background: #A0522D;
font-family: 'Arial Black', sans-serif;
color: Maroon;
text-shadow:
0 0 15px white, 0 0 16px white, 0 0 17px white,0 0 18px white, 0 0 19px white, 0 0 20px white,
0 0 21px yellow, 0 0 22px yellow, 0 0 23px yellow,0 0 24px yellow,0 0 25px yellow,
0 0 26px orange, 0 0 27px orange, 0 0 28px orange,0 0 29px orange,0 0 30px orange,
0 0 31px red, 0 0 32px red, 0 0 33px red,0 0 34px red,0 0 35px red,
0 0 36px darkred, 0 0 37px darkred, 0 0 38px darkred,0 0 39px darkred,0 0 40px darkred;
}

</style>

CSS Blaze Effect Example

<p class="abg">CSS multiple text-shadow effect</p>

<style>
.abg {
text-align: center;
font-size: 50px;
color: #800080;
font-family: 'Arial Black', sans-serif;
text-shadow: 3px 3px #ff0000, 5px 5px #00ff00, 8px 8px #0000FF;
}

</style>