Contact Us or call 1-877-932-8228


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:

<meta charset="UTF-8">
	body {
		font-size: 30px;
	div {
		margin-bottom: 20px;

<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>

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.