Text Shadow in CSS
- The Tech Platform
- Jun 22, 2021
- 1 min read
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
Your blog helped me discover this tool. I tested UnicodeToBijoy.co language support, and I was surprised that it handles multiple language scripts without breaking formatting. Definitely one of the best free solutions online.
Converting fonts manually is a headache, but using a Kruti Dev to Unicode Converter makes it effortless. Just paste your text and it's ready for WordPress or any online editor. Pure convenience for publishers. https://krutidevtounicode.co/unicode-to-kruti-dev-converter/
If you are looking for premium Chanakyapuri Call Girls, our agency provides the widest selection of beautiful and intelligent escorts to make your special time memorable!