The CSS text-shadow property adds a shadow to text.

Demo:
Syntax:
text-shadow: x-shadow y-shadow blur-radius color|none;
x-shadow – the position of the horizontal shadow.
y-shadow – the position of the vertical shadow.
blur-radius (optional) – the blur radius.
color (optional) – the color of the shadow.
none (default) – no shadow.
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 2px 2px red;
font-size:25px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Output:
This is a paragraph.
Example2:
You can add more than one shadow to the text. Add a comma-separated list of shadows:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #94d2bd;
text-shadow: 2px 2px #005f73, 0px 0px 15px #0a9396;
font-size: 25px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Output:
This is a paragraph.
Example3:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #0a9396;
text-shadow: 1px 1px #e9d8a6, 2px 2px #e9d8a6, 3px 3px #e9d8a6, 4px 4px #e9d8a6, 5px 5px #e9d8a6, 6px 6px #e9d8a6, 7px 7px #e9d8a6, 8px 8px #e9d8a6, 9px 9px #e9d8a6, 10px 10px #e9d8a6, 11px 11px #e9d8a6, 12px 12px #e9d8a6, 13px 13px #e9d8a6, 14px 14px #e9d8a6, 15px 15px #e9d8a6;
font-size: 25px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Output:
This is a paragraph.
Enjoy coding!
Read also: