css text shadow | text shadow using css | text shadow
Hey friends, today I’ll teach how to use css text shadow and how to make it look greater. Before we dive in, I’ll introduce myself. I’m CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel at here or by searching for CodingPorium on YouTube for more!
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.
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 shadow.
Now, let’s see some common cool text-shadow examples.
Below is a very basic and simple CSS Text shadow example to get started with
This shadow is same as earlier but we add a blur effect by specifying how much blur effect we want.
The output would be:
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.
Based on the simple components structure of 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!
Check it more