CSS text-shadow Property

The text-shadow property in CSS brings a touch of depth and drama to your text by adding shadows. This property accepts a list of shadows to be applied to the text, separated by commas. Remember, 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

Article Tags :

CSS

Web Technologies

CSS-Properties