One of the most widely implemented CSS3 features is text-shadow. Like @font-face, it had a previous life but was dropped in CSS 2.1. Thankfully it's back and widely supported (for all modern browsers and Internet Explorer 9 onwards). Let's look at the basic syntax:

.element {
    text-shadow: 1px 1px 1px #ccc;
}

Remember, the values in shorthand rules always go right and then down (or think of it as clockwise if you prefer). Therefore, the first value is the amount of shadow to the right, the second is the amount down, the third value is the amount of blur (the distance the shadow travels before fading to nothing), and the final value is the color.

Shadows to the left and above can be achieved using negative values. For example:

.text {
    text-shadow: -4px -4px 0px #dad7d7;
}

The color value doesn't need to be defined as a HEX value. It can just as easily be HSL(A) or RGB(A):

text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);

However, keep in mind that the browser must then also support HSL/RGB color modes along with text-shadow in order to render the effect.

You can also set the shadow values in any other valid CSS length units such as em, rem, ch, rem, and so on. Personally, I rarely use em or rem units for text-shadow values. As the values are always really low, using 1px or 2px generally looks good across all viewports.

Thanks to media queries, we can easily remove text shadows at different viewport sizes too. The key here is the none value:

.text {
    text-shadow: .0625rem .0625rem 0 #bfbfbf;
}
@media (min-width: 30rem) {
    .text {
        text-shadow: none;
    }
}

.text {
    text-shadow: -4px -4px #dad7d7;
}

.multiple {
    text-shadow: 0px 1px #fff,4px 4px 0px #dad7d7;
}

.text { 
    font-size: calc(100vmax / 40); /* 100 of vh or vw, whichever is larger divided by 40 */
    text-shadow: 
    3px 3px #bbb, /* right and down */
    -3px -3px #999; /* left and up */
}