How to add a shadow to text

Adding shadows to text

Our guide to adding a shadow to boxes explains how to add a shadow to any element on your page. However, that technique only adds shadows to the element's surrounding box. To add a drop shadow to the text itself, you 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. Play with the different values to see how they change the shadow effect.

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

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