Adding a shadow to your web page headings and text with the CSS Text Shadow property
Freeola Internet Get Dotted Domains Blog Guides Forums
Adding a shadow to your web page headings and text with the CSS Text Shadow property
Menu

Freeola Guides


Adding a shadow to your web page headings with CSS

By on 14th July, 2016 | 1 Comment(s)
Adding a shadow to you web page headings (and text) with the CSS Text Shadow property

 

As with magazines, books and newspapers, lots of web pages have headings to start of the content, acting as an introduction to the text below.

 

These headings are often decorated to make them appear more pleasing, from a simple size increase, to a colour change or the use of a fancy font, all of which can be changed using CSS.

 

Another avenue that you might like to be aware of is the ability to add a shadow to your headings, which you can also easily do with CSS nowadays.

 

They are not for everybody, granted. Some page designs may find them suitable while others they may look out of place, but with CSS Text Shadows, you can add a shadow easily with any colour you like, and delete it just as quickly if you find you actually don’t like it.

 

All major web browsers support the standard text-shadow CSS property, on desktops, laptops, tablets and smartphones. Chrome, Safari, IE and Firefox all support the text-shadow property, and for browsers that do not, the graceful degradation means that there is no lose of usability on your pages.

 

If a browser supports text-shadow, the text gets a shadow, and if it doesn’t, then no shadow will appear.

 

Shadows can be added to any text, though you will find that if used, they generally come across better for larger heading text rather than standard paragraphs.

 

The text-shadow property

 

The text-shadow property is pretty simple, and if you understand CSS you will have no problem understanding this. If you’re new to CSS you should still be able to understand how it is used.

 

It is a basic property, but can be used to create some nice effects without having to resort to using images, thus ensuring a nice looking page with no additional downloading for the user or image editing for you.

 

The text-shadow property is a single property that can be added to any CSS page or file along with your existing CSS. It takes up to 4 property values to help set the shadow of the text it is assigned to, and looks a little like this:

 

text-shadow: X Y Blur Colour;

 

X         the first property, is the x-coordinate (horizontal) that the shadow starts from.

Y         the second property, is the y-coordinate (vertical) that the shadow starts from.

Blur      the third property, is the level of blur or fuzziness the shadow will have.

Colour  the fourth property, is the colour of the shadow.

 

The coordinates of the shadow

 

The starting points for the X and Y coordinates are 0, which means the shadow is directly behind the heading. To place the shadow around the heading you must adjust these coordinates to your preferred locations, using either positive or negative numbers to move the shadow horizontally and vertically. You can use the same value types that you use for text sizes and other positioning properties, such as px, em, etc

 

For example, setting the x-coordinate (horizontal) to 4px will move the shadow 4 pixels to the right of the heading, whereas setting it to –4px will move the shadow 4 pixels to the left.

 

Following that, setting the y-coordinate (vertical) to 4px will move the shadow 4 pixels below the heading, whereas setting it to –4px will move the shadow 4 pixels above the heading.

 

A simple example of this is below:

 

text-shadow: 4px 4px 5px red;

 

 … the above would set the text shadow to be 4 pixels to the right and 4 pixels below the text, whereas:

 

text-shadow: -4px -4px 5px red;

 

 … would set the text shadow to be 4 pixels to the left and 4 pixels above the text, with:

 

text-shadow: 4px -4px 5px red;  

 

… setting the text shadow to be 4 pixels to the right, but then 4 pixels above the text.

 

You can be pretty extreme with the position of your shadows, but make sure they don’t clash too much with other surrounding page content.

 

The blurring of the shadow

 

The third value, that which sets how blurry or fuzzy the shadow may look, is an optional value. If you leave it out, it is set to zero and just looks like a shadow of the text. If you increase the value though, the shadow starts to look a little blurry and fuzzy, with the higher the number the blurrier the shadow.

 

You can set the blur level using the same value type that you used for your coordinates, such as px, em, etc.

 

For example:

 

text-shadow: 4px 4px 0 red;

 

… would set no blur on the shadow, and would be the same if you did not include the value at all, such as:

 

text-shadow: 4px 4px red;

… which would create the same effect, compared to:

 

text-shadow: 4px 4px 5px red;

 

…which would make the shadow quite blurry looking, and compared to:

 

text-shadow: 4px 4px 10px red;

 

… which would make the shadow effect very blurry.

 

Changing the colour of your shadow

 

The final value for the text-shadow property is the colour of the shadow, which can be any colour you like. You can use words (red, green, blue), hex colours (#f00, #0f0, #00f) or the “rgb()” property to set the colour in the same way you might set the colour of a background or other text.

 

For example:

 

text-shadow: 4px 4px 5px red;

… or:

 

text-shadow: 4px 4px 5px green;

 

… or:

 

text-shadow: 4px 4px 5px blue;

 

… each one would create the same type of shadow, but in different colours

 

Adding more than one shadow

 

If you like, you can add more than one shadow at a time, simply by adding a comma after each set of shadow settings. The only thing to remember is that each shadow is considered a separate shadow; they don’t automatically follow one from the last.

 

For example, 1 shadow has been created using:

 

text-shadow: 4px 4px 5px red;

 

… which will create a red shadow 4 pixels to the right and below. But to add a green shadow to the same heading, you would simply add a comma and add the second shadows settings, like so:

 

text-shadow: 4px 4px 5px red, 8px 8px 5px green;

 

The key thing to note is the pixel positions of the second shadow. If they had been the same as the first (4px 4px) then the green shadow would be hidden behind the red shadow if the blur value was set to zero. By adjusting the coordinates, we have a red shadow 4 pixels away from the original text, and the green shadow 8 pixels away.

 

Although, if the blur value is higher than zero (such as 5px), then having the same shadow positions isn’t so bad:

 

text-shadow: 4px 4px 5px red, 4px 4px 5px green; 

 

And if you wanted a third shadow, you can do that as well, following the same rules as before:

 

text-shadow: 4px 4px 5px red, 8px 8px 5px green, 12px 12px 5px blue;

You can also put shadows in opposite positions if you chose, for example:

 

text-shadow: 4px 4px 5px red, -4px -4px 5px green;

… with one shadow being on the right and below, and the other being on the left and above.

 

Give it a go

 

The text-shadow property is worth a play with, and might create some really nice added visual effects for your web page headings, without any extra downloading or worry that an unsupported browser will mess things up, so why not give it a go and see what you can come up with.


Did you find this article helpful?

Yes | No


Article Comments (1)
Add your comment:

Comments are limited to 750 characters, you have 750 remaining.


Avatar
Hmmm... commented on 4th August, 2013:
Isn't this rather 1990's?!? :P

I thought in 2013 people were embracing 'Flat Design' - "That means getting rid of bevelled edges, gradients, shadows, and reflections."

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment

Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.