Hariom Prajapati
27 Sep 2022
CSSIt 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
