CSS Text-shadow
CSS is all about presentation. Discover how CSS Text-shadow works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute, as the name suggests, introduces shadows to the text. It allows for a list of shadows separated by commas to be applied to the text. By default, this property is set to none. It enables the application of one or multiple text-shadow effects to the content of the element.
Let's see the syntax of text-shadow property.
Syntax
text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;
Values
The # CSS Text-shadow property is essential as it defines the horizontal shadow's location and permits the use of negative values.
text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;
The blur-radius refers to the blur radius, which is a value that can be optionally specified. By default, it is set to 0.
It represents the color of the shadow and can be considered an optional parameter.
none: It serves as the default setting, indicating the absence of any shadow effect.
It is employed to assign the property back to its original default value.
It effectively acquires the property from its parent element.
Let's understand it by using some illustrations.
Example- Simple shadow
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
p.simple{
text-shadow: 3px 3px red;
}
</style>
</head>
<body>
<p class="simple">
Simple Shadow
</p>
</body>
</html>
Example- Fuzzy shadow
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
p.fuzzy{
text-shadow: 3px 3px 3px violet;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="fuzzy">
Fuzzy Shadow
</p>
</body>
</html>
Example- Multiple Shadows
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
p.multi{
text-shadow: -3px -3px 3px blue, 3px 3px 3px red;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="multi">
Multiple Shadows
</p>
</body>
</html>
Example- Glow Effect
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
.multi{
text-shadow: 0 0 .1em cyan;
background-color: black;
font-size:50px;
text-align:center;
}
</style>
</head>
<body>
<div class="multi">
Glow Effect
</div>
</body>
</html>
