Adding a Shadow to Your Web Page Headings With CSS
Last updated on by cjh
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 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 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 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.
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
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.
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.
Live Chat is offline
Live Chat is available:
9:30am to 5:30pm Monday to Friday (excluding bank holidays).
It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, Edge, or Opera will provide a better, safer browsing experience for you.