The Text Shadow property in CSS adds shadows to the text. This CSS property is basically used for the decoration purpose.
Each Shadow is described by the combination of X and y offsets from the element. You can also add multiple shadows with different colors.
Here we have some of the examples which will help you to understand more clearly.
Lets see the first example of the Text -Shadow.
1. Simple Shadow
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: Red;
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>The Tech Platform</h1>
</body>
</html>Output:
2. Add blur Effect
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: Red;
text-shadow: 2px 2px 5px blue;
}
</style>
</head>
<body>
<h1>The Tech Platform</h1>
</body>
</html>Output:
3. Multiple Shadow
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
text-shadow: 1px 1px 2px black, 0 0 25px green, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>The Tech Platform</h1>
</body>
</html>Output:
4. Text Border
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: yellow;
text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}
</style>
</head>
<body>
<h1>The Tech Platform</h1>
</body>
</html>Output:
The Tech Platform