Add Shadow to Text CSS
This article is about how to add shadow to text CSS . You can use the text-shadow in all HTML element like div,p,span,li,etc.
CSS text-shadow property
values:shadow-x-offset shadow-y-offset shadow-color-spread-amount shadow-color;
The CSS text-shadow property is used to apply the shadow effect to the text of an HTML element. See the above values, we can assign a space-separated list of values to text-shadow property.
- The “shadow-x-offset” value indicates how far the shadow should be shifted either to the left or to the right, that is horizontal.
- The “shadow-y-offset” value indicates how far the shadow should be shifted either to the up or to the down, that is vertical.
- The “shadow-color-spread-amount” value indicates how much the color should be spread.
- And the “shadow-color” value indicates the shadow color itself.
How to create text-shadow
<html>
<head>
<title>Text shadow in CSS</title>
</head>
<style type="text/css">
h1{
background-color: yellow;
text-shadow: 2px 2px 5px black;
}
</style>
<body>
<h1>HEADING TEXT 1</h1>
<h1>HEADING TEXT 2</h1>
</body>
</html>Output:
Above the output, we can see there are two rectangular areas. In the first rectangle area, we have the first heading text, and in the second rectangle area, we have the second heading text which means every HTML element is going to occupy a rectangular area on the browser. In CSS style, first, select h1 part using element selector and add background-color to yellow, so the background is displayed yellow color. And add the “text-shadow” property and give value as. We give four values to the text-shadow property and I’ve explained each value in the above text property. If you give a negative value in the third position value, the shadow is not displayed. So, you should give only positive to the third position. You can give the first and second values to the negative value. You can also add the text-shadow property to the whole Paragraph.
