text-shadow and box-shadow

Even though they're usually just used as subtle details, shadows can have a huge impact on the way a design looks and feels. Applied correctly, shadows can give objects depth, increase their visibility and accentuate certain elements. In this article, I'd like to introduce you to the way shadows can be used in CSS through the text-shadow and box-shadow properties, as well as showcasing many examples of them being applied.

Text Shadow

The text-shadow property can be assigned to any HTML element (both inline and block) and will apply the defined shadow(s) to any text placed inside it. Here's how it works:

text-shadow: , , , ;

• — The number of pixels the shadow is moved on the x-axis. Negative values move the shadow to the left, while positive values move it to the right.
• — The number of pixels the shadow is moved on the y-axis. Negative values move the shadow upwards, while positive values move it downwards.
• — The number of pixels the shadow is blurred in all directions. A value of 0 results in an entirely flat shadow, while higher values make the shadow larger and lighter.
• — The shadow's color, defined in any of CSS' color models.

The way you create a text shadow should be pretty self-explanatory from here. Choose where the shadow should be placed relative to the text (assign non-zero values to and for a diagonal direction), specify how much the shadow should be blurred, and define the shadow's color. I recommend using a color model the includes an alpha value (rgba or hsla) to more easily control the strength of the shadow. Here are a couple of basic examples:

A blurry shadow is cast below me.
text-shadow: 0 5px 3px rgba(0,0,0,0.5);

I have a flat shadow facing to the top right-hand side.
text-shadow: 1px -1px 0 rgba(255,0,0,0.8);

You could not read me without my centered shadow.
text-shadow: 0 0 5px rgb(0,0,0);

You can also add more than one shadow to the same text by placing multiple shadow definitions inside the text-shadow property (separated by commas):

Look at my funky triple-shadow!
text-shadow: -3px 0 2px rgb(255,0,0), 0 3px 2px rgb(0,255,0), 3px 0 2px rgb(0,0,255);

It is even possible to create blurry text by setting the text color to something completely transparent (for example rgba(0,0,0,0)) and only making the shadow visible:

I am a ghost!
color: rgba(0,0,0,0); text-shadow: 0 0 2px rgba(0,0,80,0.5);

Box Shadow

In contrast to text-shadow, the box-shadow property only applies to block-level elements. It will apply the defined shadow(s) to the edges of the element; its syntax looks as following:

box-shadow: (inset) , , , , ;

• (inset) — An optional keyword that causes the shadow to face to the inside of the element. If not specified, the shadow is cast to the outside of it.
• — The number of pixels the shadow is moved on the x-axis. Negative values move the shadow to the left, while positive values move it to the right.
• — The number of pixels the shadow is moved on the y-axis. Negative values move the shadow upwards, while positive values move it downwards.
• — The number of pixels the shadow is blurred in all directions. A value of 0 results in an entirely flat shadow, while higher values make the shadow larger and lighter.
• — The number of pixels the shadow overflows the element in all directions. A value of 0 creates a shadow that is the same size as the element, while positive values make the shadow expand and negative values make it contract.
• — The shadow's color, defined in any of CSS' color models.

If you've understood how text shadows work, box shadows shouldn't be a problem. There are merely two additional values: By including (or not including) inset you can decide whether the shadow should go to the inside or outside of an element. Furthermore, you can control the shadow's size through the property, enabling you to create outlines and shadows larger/smaller than the element. Once again, here are a few examples:

A shadow is cast to the bottom right-hand corner.

box-shadow: 5px 5px 8px 0 rgba(0,0,0,0.8);

I have a centered shadow facing to the inside.

box-shadow: inset 0 0 5px 0 rgb(255,0,0);

This is not a border, it's a shadow.

box-shadow: inset 0 0 0 2px rgba(0,0,0,0.5);
(Creating borders through shadows can actually be really helpful, as normal borders modify an element's size, while shadows keep the layout untouched.)

Once again, it is possible to apply multiple shadows to the same element. Note that the shadow listed first will also be rendered at the very top:

Funky triple-shadow: Part two.

box-shadow: 0 0 2px 2px rgb(0,0,255), 0 0 2px 4px rgb(0,255,0), 0 0 2px 6px rgb(255,0,0);

Finally, let me create a box that isn't just meant as a feature demonstration, but one that I'd actually use in a design:

My inner shadows and subtle bottom bevel create an indented effect.

box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), inset 0 1px 3px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.5);

Closing remarks

I hope this article has given you an insight to the vast world of CSS shadows. Don't lose motivation if some things don't look like intended at first; shadows always involve a bit of trial-and-error, and it might take some time until you achieve the results you aimed for. The only thing left for me to say is that while there are practically endless possibilities for CSS shadows, I can only recommend not to overuse them. As much as shadows can contribute to a design's polish, they can easily have the opposite effect as well, so sometimes a subtle shadow might be more effective than a super-fancy one.

Best of luck and have fun,
jonarific