The Tech Platform
Jun 22, 20211 min
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.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: Red;
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>The Tech Platform</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: Red;
text-shadow: 2px 2px 5px blue;
}
</style>
</head>
<body>
<h1>The Tech Platform</h1>
</body>
</html>
<!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>
<!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>
The Tech Platform