CSS - Text Shadow

The text-shadow property in CSS provides shadows to texts.

Text shadow in CSS with color

Let us apply shadow to a text and color it red.

Example :

<html>
<head>
	<style>	
		p {
  			text-shadow: 1px 1px red;
		}	
	</style>
</head>
<body>
	<p> This is the first paragraph </p>
</body>
</html>

Output :

So, in the above example, we have applied the shadow to the <p> element and coloured it red.

And that is because of the text-shadow property of CSS.

text-shadow: 1px 1px red;

The text-shadow property has three values. The first value(i.e. 1px) is the horizontal distance between the shadow and the text, the second value(i.e. 1px) is the vertical distance between the shadow and the text and the third value is the color.

Text shadow in CSS with color and blur effect

Example :

<html>
<head>
	<style>	
		p {
  			text-shadow: 1px 1px 3px red;
		}	
	</style>
</head>
<body>
	<p> This is the first paragraph </p>
</body>
</html>

Output :

Now, if you see the above output, there is a blur effect along with the shadow and red color.

That is because in the text-shadow property, we have specified the third value(i.e. 3px). This third value specifies the blur effect.

Multiple shadows for text-shadow property in CSS

Example :

<html>
<head>
	<style>	
		p {
  			text-shadow: 0 0 3px red, 0 0 4px blue;
		}	
	</style>
</head>
<body>
	<p> This is the first paragraph </p>
</body>
</html>

Output :

In the above example, we have added two shadows using comma in text-shadow property.

text-shadow: 0 0 3px red, 0 0 4px blue;

As a result we got a text shadow that is a mix of red and blue.

❮❮ PREV NEXT ❯❯