# 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`

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

Foo

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

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

Foo

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

```css
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.

```css
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.