Text shadows

Let’s make a start by looking at text shadows. Text shadows are a fairly simple way to change the aesthetics of text, and therefore provide a good starting point. Support for text-shadow is also ubiquitous. Let’s first consider the basic syntax:

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

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 as the first two 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 hsl(140 3% 26% / 0.4);

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