Text-shadow and Box-shadow are two of my most often used CSS properties. They add a special feel to any element, whether it’s the appearence of letterpressed type or an image just barely reaching off the page. With CSS3 you even can create page curl shadows without images.

A problem with this, though, is that a lot of designers fail to keep contrast and realism in mind when using these techniques. Consider, for example, these two boxes:

Both boxes have the CSS box-shadow: 1px 1px 5px 2px (if you don’t see the box shadow, perhaps you should upgrade your browser). The prime difference is that box 1 uses the standard hex color code #000000, while box 2 utilizes rgba colors (0,0,0,0.1), where the fourth number represents that the shadow has an opacity of 10%. The shadow on the second box is much more subtle – the box doesn’t look like it’s hovering 10 feet off the page in broad daylight. Many designers miss this fact, and layer z-indexed element over element with strong box shadows, removing both the feeling of realism and minimalism.

Text-shadows have the same effect. Look at the difference between these two sentences:

The quick brown dog jumped over the lazy dog

The quick brown dog jumped over the lazy dog

Big difference! The first sentence is hard to read and awkward. The second has a barely noticeable text shadow that adds the appearance of being pressed into the page. The difference? Hex versus RGBa, or more specifically, text-shadow:1px 1px 1px #f1f1f1 versus text-shadow:1px 1px 1px rgba(255,255,255,0.1).

Feeling inspired? You may want to check out this code that turns hex values into RGBa and this code that turns RGBa into hex.