How to add shadow to text in CSS

December 28, 2020 admin

In this tutorial, we are going to see how to add shadow to text in CSS. You can use the CSS text-shadow property to apply the shading effect (like the shading style in Photoshop). You can also apply more than one shadow by providing a list of values separated by commas.

Example 1 :

<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  text-shadow: 2px 2px blue;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>

Result
Lorem ipsum dolor sit amet.

Example 2 :

<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  text-shadow: 2px 2px 8px blue;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>

Result
Lorem ipsum dolor sit amet.

Example 3 :

<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  color: white;
		  text-shadow: 2px 2px 4px #000000;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>

Result
Lorem ipsum dolor sit amet.

Example 4 :

<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  text-shadow: 0 0 3px blue, 0 0 5px green;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>