How to add a shadow to text

In this we can find out how to add a shadow to any text on your page.

Adding shadow to text
To add a drop shadow to the text inside the box we need a different CSS property
 “text-shadow"
The text-shadow property takes a number of values:

• The offset on the x-axis
• The offset on the y-axis
• A blur radius
• A color

In the example below we have set the x-axis offset to 2px, the y-axis offset to 4px, the blur radius to 4px, and the color to a semi-transparent blue. Change with the different values to see how they change the shadow.

h1 {
    color: royalblue;
    text-shadow: 2px 4px 4px rgba(46,91,173,0.6);
}

 <div class="wrapper">
    <h1>Adding a shadow to text</h1>
</div>