Mastering CSS’s text-shadow property is a great stepping stone for learning to create many other cool text effects using CSS. The property will add a shadow that duplicates any of your text and will place the duplicate text at a specified position relative to the original text. Additionally, the property allows you to customize the color of the text shadow. Here’s what the syntax looks like:
text-shadow: [horizontal-offset] [vertical-offset] [blur color];
So to use the property, you just need to set the horizontal and vertical positions (relative to where the original text is) and the color. To set the text shadow really close your original text, your CSS would probably look something like this:
h2{
text-shadow: 4px 3px #999;
}
If you want to place it a little farther away from your original text, you’ll need to change the horizontal and vertical offset positions:
h2{
text-shadow: 14px 13px #999;
}
You can even set the offputs so that the shadow appears completely independent from the original text, like this:
h2{
text-shadow: 44px 43px #999;
}
