clock  Mon - Sun 8.00 AM - 8.00 PM
fb
instagram
play store
pinterest

More

CSS Text Shadow

teknowize

CSS Text Shadow

It is use to adds shadow to text.

Note:- To add more than one shadow to the text, add a comma-separated list of shadowslike, text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; .

 

Syntax - 

text-overflow: h-shadow v-shadow blur-radius color;

 

values

h-shadow

Always Required.

It is use to add position of the horizontal shadow.

Negative values are allowed.

v-shadow

Always Required. 

It is use to add position of the vertical shadow. 

Negative values are allowed.

blur-radius

It is Optional. 

It is use to add radius of the blur.

Defaultvalue is 0.

color

It is Optional. 

It is use to add color of the shadow.

You can use all color values of CSS.

 

For example -

<!DOCTYPE html>
<html>

<head>
	<title>CSS Text Shadow</title>
	
<style>
	.textshadow1 {
  text-shadow: 10px 10px 0px red;
 }
.textshadow2 {
text-shadow: 0 0 3px #FF0000, 00 5px #0000FF;
}

</style>
</head>

<body>
	<h3> one shadow value clip </h3>
	<h1 class="textshadow1">TEKNOWIZE</h1>
	<h3> more than one shadow value</h3>
	<h1 class="textshadow2">TEKNOWIZE</h1>
</body>

</html>

 

Output

Text Shadow

CSS