CSS text-shadow Property

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!

Share this: