clubmate.fi

Some text shadow effects

Here’s some text shadow effects like outline, fake bold, and blurry text.

The basic text-shadow syntax

The length and the color values can have following two orders:

• offset-x | offset-y | blur-radius | color
• color | offset-x | offset-y | blur-radius

text-shadow: 6px 6px 6px #33ffcc;

You can put the color first and skip the blur-radius:

text-shadow: #33ffcc 6px 6px;

You can also skip the color and it uses the text color:

text-shadow: 6px 6px;

Outlined text

You can have multiple shadows, this way you can make outlines and other more crazy things:

text-shadow:
  4px 4px 0 #33ffcc,
  -4px -4px 0 #33ffcc,
  4px -4px 0 #33ffcc,
  -4px 4px 0 #33ffcc;

You can see it better if they all have a different color (kind of cool effect):

text-shadow:
  4px 4px 0 red,
  -4px -4px 0 blue,
  4px -4px 0 gold,
  -4px 4px 0 green;

Fake bold

This way you can also do fake bold text, it won’t look as good as real bold, but it’s passable in smaller sizes. This might come handy when you’re forced to use a font that doesn’t have a bold cut, like Monaco.

text-shadow:
  2px 2px 0,
  -2px -2px 0,
  2px -2px 0,
  -2px 4px 0;

Out of focus text

Using the same pattern than above, but adding some blur, you can get a nice out-of-focus effect:

text-shadow:
  2px 2px 3px,
  -2px -2px 3px,
  2px -2px 3px,
  -2px 4px 3px;

Embossed text

The embossed effect only works on a background color.

text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);

Conclusions

You could go berserk with the amount of shadows. These are just the basics.