Javascript DOM CSS Style textShadow Property

Introduction

Add shadow to a text: 

document.getElementById("myP").style.textShadow = "5px 5px 1px #ff0000, 10px 10px 1px #0000ff";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<p id="myP">This is an example paragraph.</p>

<button type="button" onclick="myFunction()">Add shadow to text</button>

<script>
function myFunction() {/*from  w  ww. ja v a2s . c o  m*/
  document.getElementById("myP").style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";
}
</script>

</body>
</html>

The textShadow property sets or gets one ore more shadow effects for a text.

The textShadow property attaches one or more shadows to text.

The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color.

Default lengths are 0.

Property Values

ValueDescription
none No shadow is drawn. default
h-shadow Required. The position of the horizontal shadow. Negative values are allowed
v-shadow Required. The position of the vertical shadow. Negative values are allowed
blur Optional. The blur distance
colorOptional. The color of the shadow.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The textShadow property return a String representing a comma-separated list of shadow effects applied to the text of the element.




PreviousNext

Related