CSS text-shadow Property
The text-shadow property in CSS is used to add shadows to the text. This property accepts a list of shadows that are to be applied to the text, separated by the comma. The default value of the text-shadow property is none.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color|none|initial| inherit;
Property values:
- h-shadow: This property is required & used to specify the position of horizontal shadow. It accepts the negative values.
- v-shadow: This property is required & used to specify the position of vertical shadow. It also accepts the negative values.
- blur-radius: It is used to set the blur radius. Its default value is 0 & is optional.
- none: It represents no shadow added to the text, this is the default value.
- color: It is used to set the color of the shadow. It is optional.
- initial: It is used to set text-shadow to its default value.
- inherit: This property is inherited from its parent element.
Example: This example shows the use of the text-shadow property with specific values assigned in pixels.
HTML
<!DOCTYPE html><html><head> <title> CSS | text-shadow Property </title> <style> h1 { text-shadow: 5px 5px 8px #00FF00; } </style></head><body> <h1> GeeksforGeeks </h1></body></html> |
Output:
Supported Browsers: The browsers supported by the text-shadow property are listed below:
- Google Chrome 2.0
- Internet Explorer 10.0
- Microsoft Edge 12.0
- Firefox 3.5
- Opera 9.5
- Safari 1.1
.png)
