CSS Text Shadow Property With Example Code
Hey friends, today I’ll teach how to use css text shadow and how to make it look greater.
Introduction
Today we are going to see a simple, cool, and pretty useful Css property. This is the text-shadow property. You might have heard of box-shadow before. However, text-shadow is made specifically for text.
Components
Look at the photo below. I have added arrows to easily explain the components of text-shadow.
Take some time to understand these components as this is the main structure. Based on this, we can make text shadows.
Basics
Now, let’s see some common cool text-shadow examples.
a) Simple Text Shadow using css
Below is a very basic and simple CSS Text shadow example to get started with
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px green;
}
</style>
</head>
<body>
<h1>Wow! I have a text-shadow</h1>
</body>
</html>
b) Blur Effect Text Shadow using css
This shadow is the same as earlier but we add a blur effect by specifying how much blur effect we want.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 8px green;
}
</style>
</head>
<body>
<h1>Wow! I have a text-shadow</h1>
</body>
</html>Restaurant Website Using HTML and CSS
The output would be:
c) Double Glow Shadow using css
This is a simple but cool shadow effect where we add 2 overlapping shadows. However, do choose the 2 colors properly so that the shadow looks nice.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px gold, 0 0 5px green;
}
</style>
</head>
<body>
<h1>Wow! I have a text-shadow</h1>
</body>
</html>
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Based on the simple components structure of the text-shadow diagram and 3 beginner-friendly CSS text-shadow examples given, I hope you can now use text shadow to make your text look cool!
Thank You!
comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!
Written by: @codingporium
![Read more about the article 15+ CSS Text Hover Effects [Demo + Code]](https://www.codewithrandom.com/wp-content/uploads/2022/11/codewithrandom47-300x157.png "15+ CSS Text Hover Effects [Demo + Code]")
