Text-shadow

Contact Us or call 1-877-932-8228
Text-shadow

Text-shadow

The text-shadow property is used to add shadow to text. The property accepts the following values:

  • h-shadow - the position of the horizontal shadow; value can be negative (required)
  • v-shadow - the position of the vertical shadow; value can be negative (required)
  • blur-radius - the radius of the blur (optional; default is 0)
  • color - the color of the text shadow (optional)
  • none - no text shadow (default value)

Code Sample:

CssText/Demos/TextShadow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Text-Shadow</title>
<style>
	body {
		font-size: 30px;
	}
	div {
		margin-bottom: 20px;
	}
</style>
</head>
<body>
<h1>Text-Shadow</h1>

<div style="text-shadow: none;">Text-Shadow: None</div>
<div style="text-shadow: 1px 1px 1px #00FF00;">Text-Shadow: 1px 1px 1px #00FF00</div>
<div style="text-shadow: 5px 0 3px #FF0000;">Text-Shadow: 5px 0 3px #FF0000</div>
<div style="text-shadow: 2px 2px 5px #0000FF;">Text-Shadow: 2px 2px 5px #0000FF</div>
<div style="text-shadow: 0 0 10px #FF00FF;">Text-Shadow: 0 0 10px #FF00FF</div>
</body>
</html>

The above code will render the following: Note that in the last example with horizontal and vertical shadow position set to 0 and a greater-than-0 value for the blur, we can achieve a glow effect.

Next