Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content


How to add Text Shadow in CSS3?

The Font-Face Rule - This font-face comes in picture when less-sass CSS is used. It is not used in normal CSS. What is less and sass? Less & sass is advanced CSS concept. It works based on variables. When we want to define same font family at ten place, we define it every place. But using less-sass, we will define one font-family to one variable. That means we have given a name to it. Now, we will use that name to define font family at number of places.

It will decrease the CSS load time that means website will work speedy. Less-sass CSS doesn’t work in normal browser. For that we need a strong server and a script, too.

Text Shadow - Suppose, we want to make text attractive, so we will add shadow to it. In CSS, to show shadow; we have to write value for horizontal, vertical shadow, blur-radius and color, too. Let’s see an example of how text shadow works -
body{font-size: 30px; text-align: center;}

You will see your text is increased in size and also aligned in center. For text shadow write -
body{font-size: 30px; text-align: center; text-shadow: 3px 3px 5px red;}

Go to browser and see, a red colored shadow is applied. But, as you can see, shadow is not exact behind the text. So for that, we will change the horizontal and vertical value to 0px. Save the changes and see the effects.

This way, you can apply any size or color of shadow.


Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere