CSS Examples

How to Set a Text Shadow using CSS

In this example, we will learn how to set a text shadow using CSS. We can use the text-shadow property to set a shadow in the text.

Prerequisites

CSS text-shadow property

Example

HTML

        .text1 {
            text-shadow: 5px 10px red;
        }
  
        .text2 {
            text-shadow: -5px -6px yellow;
        }

CSS

        <span class="text1">This is a text</span>
        <span class="text2">This is another text</span>

Output

Here, the text-shadow property sets the shadow as defined in the values. We provided two margin values and a color value. the first value sets the margin of shadow from the left side of the text and the second value sets the margin from the top of the text. The accepts negative values as well.

Conclusion

In this example, we learned how to set a text shadow using CSS. We used the text-shadow property to set the shadow at the bottom-right side and top-left side of the texts.