The text-shadow feature in CSS adds a shadow to text. It takes a list of shadows separated by commas, which are added to the text and the decoration of that text. Each shadow is described by a combination of X and Y offset, blur radius, and color.
text-shadow: /* offset-x | offset-y | blur-radius | color */To elaborate a bit more – each shadow is defined by two or three values followed by the color value (optional). The first two
We won’t expand further on the values, but text shadows can add emphasis, uniqueness, depth, and volume to text, and they are undoubtedly a tool that many designers use for this purpose. See some cool examples of using the text-shadow feature, some I created myself and some I encountered during my web browsing…
You can use the toggle button on the right to view the text without shadows. (Not available on mobile).
Examples of using the text-shadow feature
.olympics {
background: #2096f3;
}
.olympics div {
text-shadow: -1px -1px 0px #2196f3, 2px 2px 0px #2196f3, 4px 4px 0px #0d47a1;
color: white;
font-size: 60px;
}.plaster {
background: #cbcbcb;
}
.plaster div {
background-color: #7c7c7c;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255, 255, 255, 0.4) 0px 3px 3px;
font-size: 3em;
letter-spacing: 8px;
}.california {
background: #2c2c2c;
}
.california div {
color: tomato;
display: block;
text-shadow: 0 0 10px orangered, 0 0 20px firebrick, 0 0 40px maroon, 0 0 80px darkred;
will-change: filter, color;
filter: saturate(60%);
animation: flicker steps(100) 3s 3s infinite;
font-family: 'Marck Script', cursive;
}
@keyframes flicker {
50% {
color: white;
filter: saturate(200%) hue-rotate(20deg);
}
}.caricature {
background: #fc3053;
}
.caricature div {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0 -4px 0 #212121, 0 -4px 0 #212121, 0 4px 0 #212121, 0 4px 0 #212121, -4px 0 0 #212121, 4px 0 0 #212121, -4px 0 0 #212121, 4px 0 0 #212121, -4px -4px 0 #212121, 4px -4px 0 #212121, -4px 4px 0 #212121, 4px 4px 0 #212121, -4px 9px 0 #212121, 0 9px 0 #212121, 4px 9px 0 #212121, 0 19px 1px rgba(0, 0, 0, .1), 0 0 4px rgba(0, 0, 0, .1), 0 4px 2px rgba(0, 0, 0, .3), 0 12px 4px rgba(0, 0, 0, .2), 0 9px 9px rgba(0, 0, 0, .25), 0 24px 24px rgba(0, 0, 0, .2), 0 36px 36px rgba(0, 0, 0, .15);
color: white;
letter-spacing: 5px;
font-family: 'Heebo', sans-serif;
font-style: italic;
}.pacifiers {
background: #ece5da;
}
.pacifiers div {
text-shadow: 0 8px 9px #c4b59d, 0 -2px 1px #fff;
color: #f1f1f1;
}.movingShadow {
background: #acacac;
}
.movingShadow div {
color: yellow;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7),
5px 5px 1px orange,
6px 6px 2px rgba(0, 0, 0, 0.7),
10px 10px 1px red,
11px 11px 2px rgba(0, 0, 0, 0.7),
15px 15px 1px purple,
16px 16px 2px rgba(0, 0, 0, 0.7);
-webkit-animation: text-snake 1s infinite alternate;
-moz-animation: text-snake 1s infinite alternate;
-ms-animation: text-snake 1s infinite alternate;
animation: text-snake 1s infinite alternate;
font-size: 90px;
font-family: 'Heebo', sans-serif;
}
@keyframes text-snake {
from {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7),
5px 5px 1px orange,
6px 6px 2px rgba(0, 0, 0, 0.7),
10px 10px 1px red,
11px 11px 2px rgba(0, 0, 0, 0.7),
15px 15px 1px purple,
16px 16px 2px rgba(0, 0, 0, 0.7);
}
to {
text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.7),
-5px 5px 1px orange,
-6px 6px 2px rgba(0, 0, 0, 0.7),
-10px 10px 1px red,
-11px 11px 2px rgba(0, 0, 0, 0.7),
-15px 15px 1px purple,
-16px 16px 2px rgba(0, 0, 0, 0.7);
}
}.university {
background: #22224c;
}
.university div {
text-shadow: 0 0 2px azure, 0 0 0 aqua, 0 0 40px dodgerblue, 0 0 60px blue;
filter: saturate(60%);
font-weight: 300;
color: azure;
}.forests {
background: #eecccb;
}
.forests div {
text-shadow: 0 1px 0 #e4adad, 0 2px 0 #e1a6a6, 0 3px 0 #df9e9e, 0 4px 0 #dc9696, 0 5px 0 #da8f8f, 0 6px 0 #d78787, 0 7px 0 #d58080, 0 8px 0 #d27878, 0 0 5px rgba(237, 154, 154, 0.05), 0 -1px 3px rgba(237, 154, 154, 0.2), 0 9px 9px rgba(237, 154, 154, 0.5), 0 12px 12px rgba(237, 154, 154, 0.5), 0 15px 15px rgba(237, 154, 154, 0.5);
color: #ffffff;
font-family: 'Marck Script', cursive;
direction: ltr;
font-size: 1.5em;
}.green {
background: #629552;
}
.green div {
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2), 0 -5px 35px rgba(255, 255, 255, 0.3);
font-family: 'Heebo', sans-serif;
font-size: 3em;
}.terror {
background-color: #fa691a;
background-image: linear-gradient(135deg, #384138 0%, #686c6b 50%);
}
.terror div {
color: #292e2d;
text-shadow: -1px -1px 0 rgba(255, 255, 255, .2), 1px 1px 0 rgba(0, 0, 0, .25), 3px 3px 3px rgba(0, 0, 0, .25), 10px 10px 20px rgba(0, 0, 0, .5), 20px 40px 40px rgba(0, 0, 0, .5);
font-family: 'Tinos', serif;
font-size: 1.2em;
}.seventies {
background: #d5d5d5;
}
.seventies div {
letter-spacing: 0.01em;
text-shadow: 4px 4px 0 #ebebeb, 5px 5px 0 rgba(0, 0, 0, 0.3);
font-family: 'Miriam Libre', sans-serif;
font-weight: 300;
}.israel {
background: #69a3be;
}
.israel div {
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);
color: white;
font-family: 'Tinos', serif;
letter-spacing: 5px;
}.board {
background: #eeeeee;
}
.board div {
color: white;
text-shadow: 1px 1px 0 #c8c8c8, 5px 5px 0 #ffd217, 10px 10px 0 #5ac7ff, 15px 15px 0 #ffd217, 20px 20px 0 #5ac7ff;
font-size: 2.7em;
position: relative;
top: -15px;
font-family: 'Heebo', sans-serif;
letter-spacing: -4px;
}Summary
With the right fonts and colors, impressive shadows can be achieved using the text-shadow feature. Do not hesitate to use more than one shadow to achieve the desired results. Moreover, as you may have noticed in one of the examples, animations can be added to shadows to achieve very nice effects…
Which shadow did you like the most? Tell us in the comments, and if you have created some cool shadows, share them with us in the comments and I will add them to the article…
