CSS Tutorial: Using Text Shadows

I’m seeing more and more designs utilizing text shadows to increase legibility or create beautiful typographic effects. While I was planning my redesign, I wanted to incorporate the text-shadow effect to maximize the flat illustrative look that I was going for. Text shadows are a cool CSS trick that can apply a blurry or solid shadow behind your text. Here’s how to use them!

Probably the simplest text shadow you can make is the standard, solid shadow:

text-shadow: 2px 1px 0px #777;

In the code above, I’m using the CSS declaration “text-shadow”, which creates a shadow like this:

text-shadow01

The basic text-shadow declaration goes like this:

text-shadow: horizontal vertical blur #color;

So, if you were looking for a text shadow to cast from the lower right instead of the upper left, you would manipulate the horizontal and vertical positions in your declaration. So with that having been said, your declaration would look like this:

text-shadow: -2px -1px 0px #777;

And the text shadow would look like this:

text-shadow02

You can change the color of the text shadow, by altering the hex code at the end of the declaration (text-shadow also works with RGBA codes). Note: If you want to change the color of the text itself instead of its shadow, you just use a normal color declaration. Let’s say I want my text to be blue with a dark blue shadow this time. My declaration would look like this:

color: #669ae1;
 text-shadow: -2px -1px 0px #2f568c;
 

And my text would end up looking like this:

text-shadow03

Okay, so how does blur work for text shadow? Basically, you add blur by increasing the blur value from 0 to as high as you want. For example, if I wanted a bit of blur in my text shadow,  would alter the declaration like this:

color: #669ae1;
 text-shadow: -2px -1px 5px #2f568c;

The one thing to note is the third value behind the horizontal position value and the vertical position value. I raised that value from 0px to 5px and get a blurry shadow behind my text, like this:

text-shadow04

If that shadow is just too dark or too overwhelming, you can also reduce the shadow’s opacity through CSS. To manipulate the opacity, we’ll have to use the RGBA color value for our shadow instead of the HEX code so that we get some control over the opacity.

So, for example, if we took the code above and swapped out our HEX code for an RGBA value, we’d get this:

color: #669ae1;
 text-shadow: 2px 1px 5px rgba(47, 86, 140);

Now if we want to change the opacity, it is just a matter of adding one addition value to the end of the RGBA code. Opacity is measured from 0 – 1, where 0 is completely transparent and 1 is completely opaque. You use decimals within the 0 – 1 range to determine how opaque you’d like your shadow to be. I want mine to only be 50% opaque. So I would declare the opacity value as 0.5 like this:

color: #669ae1;
 text-shadow: 2px 1px 5px rgba(47, 86, 140, 0.5);

Note that the opacity value is declared inside of the rgba value and not outside. So the above code will generate my text shadow to make it look like this:

text-shadow05

Well, that seems less overwhelming at least. Text shadow, as you can see, is pretty simple to remember and use. But if you just need something quick to help you get up and running there is a generator for this that you can access here: CSS3Gen’s Text-Shadow Generator.


Posted

in

by