Shadows on text with CSS text-shadow

How to apply shadows and other effects to text with CSS and the text-shadow attribute.

The CSS text-shadow attribute is used to create shadows on the text, but really with a little practice and imagination it can support many other interesting effects. In this article we will explain this style rule and offer various examples to demonstrate its versatility.

Before starting I want to clarify that, despite having put the article inside the , the text-shadow style rule does not belong to CSS3 but was already introduced in level 2 of the Cascading Style Sheets. However, until now it had not been implemented within the most common browsers, which is why we are grouping it as a novelty within this CSS3 Manual.

Once we have commented on this detail about the shadows in text, with CSS and without using a graphic design program, in a few moments we will see how easy it is to create them. Let’s start by looking at an example declaration with text-shadow.

solid shadow

h1{
text-shadow: 1px 2px #999;
}

So we’re changing the level 1 headings to have a solid shade of gray. The values ​​that we are indicating in the shadow are:

• Shadow offset to the right (1px).
• Shadow offset down (2px).
• Shadow color (#999).

blurred shadow

The solid shadow is fine, but in many cases we will want to make a blur effect of the shadow, which is much more realistic and often more visually appealing. For this we can define an additional value, which is the size of the blur.

h2{
text-shadow: 3px 3px 2px #696;
colour: #666;
}

Here we’ve defined a shadow with 3px offset down and to the right and 2px blur. In addition, the shadow is greenish. The color of the text has also been defined, with the “color” attribute, but that has nothing to do with the shadow.

Place multiple shadows on the same element

We can define several different shadows on the same page element, with which various effects can be obtained, some of them quite striking. To do this, you can place the shadows that you want separated by commas.

h3{
text-shadow: 10px 8px #ccf, -10px 12px #fcf, -8px -12px #cfc, 12px -5px #fc9;
Color: #999;
}

There is no mystery to this, all the shadows that we define will simply be placed, but it will be necessary to have a little judgment to make effects that are worthwhile.

Various effects with CSS shadows

The text-shadow attribute is an excellent resource for making different types of graphic effects that are visually attractive, even more so considering that they are made with simple text and only assigned some style rules. Below we will see several examples that we can write down as inspiration, but the range of possibilities goes much further.

Shadow “Giga”:

We can use multiple solid shadows to generate a super shadow for our text.

h2.shadowgiga{
text-shadow: #f83 -1px 1px, #f83 -2px 2px, #f83 -3px 3px, #f83 -4px 4px, #f83 -5px 5px;
colour:#060;
letter-spacing: 1px;
}

fire effect:

If we use several shades of orange colors we can achieve a fire effect. We have to do a bit of trial and error to get a realistic result, but something interesting can be achieved.

h2.fire{
text-shadow: 0 0 20px #fefcc9, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
colour: #666;
}

Outline text with a stroke:

With four solid shadows one pixel away from the text, placed on all four sides, we can achieve a stroke effect around the text.

h2.outline{
text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
color: #fff;
}

Embossed text:

With a dark and a light shadow we can achieve a relief effect on the text. It can be a relief or a low relief, depending on where we place both shadows.

h2.relief {
text-shadow: 1px 1px white, -1px -1px #333;
background-color: #ddd;
color: #ddd;
padding: 10px;
}

Pixel art effect:

With a little more imagination we can achieve the most diverse effects. In this case we have done a test that gives a “pixelart” design result, of those graphics created pixel by pixel from the games of yesteryear.

h1.pixelart{
text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3;
colour: #ccc;
}

All of the eyeshadow styles offered in this article can be .

Conclusion to text-shadow

In short, the CSS shadows that we get with text-shadow offer us a new, very fast and creative way to give some design touches to our websites, without having to resort to Photoshop or another design program, as was the case before.

If we look for old articles within .com we will see that various workshops are offered to create shadows in texts and in some cases CSS techniques are offered to emulate shadows when the text-shadow attribute did not exist. All the previous possibilities required meticulous work and the collaboration of other techniques or programs such as graphic editors.

Another advantage of using CSS is that, if tomorrow we want to change anything, such as the size of the text, the effect of the shadow or simply the color of the web, and with it the color of the shadows to match the new chromatic , we only have to edit our style declaration.