How to add text-shadow

Adding a shadow for boxes is pretty simple. But how do we add a shadow to text? It is possible with the text-shadow property. It works in much the same way as box-shadow. Here's the definition:

text-shadow: horizontal-shadow vertical-shadow blur-radius color

Let's create an example based on the previous chapter's code to better understand the text-shadow property:

HTML:

<div class="container"> <div class="box_container"> <div class="box__bottom_right">bottom right</div> </div> <div class="box_container"> <div class="box__bottom_left">bottom left</div> </div> <div class="box_container"> <div class="box__top_right">top right</div> </div> <div class="box_container"> <div class="box__top_left">top left</div> </div> <div class="box_container"> ...

Get Professional CSS3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.