Learn CSS3 Text Shadow in Three Steps

Learn CSS3 Text Shadow in Three Steps

The text-shadow property is an amazing feature of CSS. It was introduced in CSS version 2.0 (i.e. CSS2) but removed from the version 2.1 because none of the browsers added the text-shadow rendering feature into them. Later on, in CSS version 3.0 (i.e. CSS3) it was again introduced and implemented by all major web browsers. After the implementation of text-shadow property, it really created a positive impact among web designers. Before the implementation, if you needed to add some drop shadow to your texts, you either had to create an image of the texts with the shadow or with the help of Flash. But now, by using the text-shadow property, it just needs a minute to add drop shadows to your texts. It keeps your web pages light and helps you avoid some unnecessary requests to the web server. In this tutorial, you will figure out how to create text-shadow and implement them in your projects. First, let’s get a look at the syntax of text-shadow property

Learn CSS3 Text Shadow in Three Steps

As you see in the image above, the selector is H1, but it can be anything – a paragraph, a hyperlink, table contents, etc. Whatever the selector is, always remember the syntax. Because whenever create the text-shadow, you will need to imagine your shadow direction and distance as per its syntax.

Step 1

Now we will create an HTML (usually index.html) file with these codes:

Step 2

We will create a new CSS file with the name style.css and then insert it into our newly created HTML file. Here the CSS codes are:

Step 3

Now insert the CSS file within HTML using External Style Sheet method. To do this, put this line in to your head section

NOTE: There are three different methods to insert a style sheet into HTML

  1. External style sheet method
  2. Internal style sheet method
  3. Inline style method

After inserting the CSS, our HTML file will look something like the image below (in text-shadow supported web browsers).

CSS3 Text Shadow Final Output

This text-shadow contains 3 pixels of Horizontal Offset, 3 pixels of Vertical Offsets, 0 pixel of Blur Radius and a dark blue Shadow Color (i.e. #365). You can manipulate all these values by your own, and every time you manipulate even a single pixel, you will see a different output. You can download the project files from the link below. Download it, debug it, learn it and play with it. If you still have any doubts regarding text-shadow property, you can ask me using the comment box below. I would love to hear from you.


Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...