clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Some text shadow effects

Filed under: Styling— Tagged with: CSS

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;
Foo

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

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

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

text-shadow: 6px 6px;
Foo

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;
Foo

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;
Foo

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;
Foo

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;
Foo

Embossed text

The embossed effect only works on a background color.

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

Conclusions

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

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!