Looking for a nice CSS Shadow resource

Hey,

A had a quick Google for tasteful CSS text/box-shadow examples but didn’t find any real standout or in-depth resources. I can share some of my thoughts however. Just personal preference, but it may help you a bit.

Tip 1: Use a black RGBA color with low opacity
Always set the shadow color to jet black and then drag the opacity slider down to 0.2 or 0.3. That way, the background color will come through making the shadow look more natural. And it saves you having to match a darker version of the background color manually.

Tip 2: Less if often more
Shadow that covers a small area around the text or block and/or light contrast against the background (Tip 1) often makes for nicer looking shadow. The suggested shadow values in MT’s dropdown menu, which are fairly low, are designed to encourage this.

Tip 3: Use a reasonable blur to x/y ratio
For box-shadow I like to roughly double the values set for x/y for the blur property. I also think it looks nice to set blur to e.g. 4px and have x and y set to zero. I rarely if ever use spread. For text-shadow however, I sometimes set 1px or -1px for the x/y values and no blur at all. I will use blur if setting a larger text-shadow though.

Tip 4: Use em for text-shadow
This is a fairly advanced tip, but I think it’s nice for shadow to be proportional to font size. Most sites lower the font-size for mobile devices. I think it looks better if the text-shadow reduces with the text. So you might add the following style values for text-shadow:

x: 0
y: .035em
blur: .02em
color: rgba(0,0,0,.2)

Em values are tied to the font-size of the current element, so larger text will have a larger shadow.

Tip 5: Use rem for box-shadow
Blocks of content also tend to shrink on mobile. It’s nice if any shadow applied to those blocks reduces too. This is quite easy to achieve if you have set up some kind of responsive typography which adjusts the font-size of the root HTML element for different screen sizes. For instance, you might have something like this:

html {
  font-size: 1rem;
}

@media (min-width: 576px) {
  html {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 1.3rem;
  }
}

@media (min-width: 1100px) {
  html {
    font-size: 1.4rem;
  }
}

With the above code in place, you could set box-shadow to something like this:

x: .17rem, 
y: .17rem, 
blur: .25rem, 
color: rgba(0,0,0,.3)

The rem values will create larger shadows on wider screens because the font-size of the HTML element will be larger on larger screens (with the media queries above in place). The rem unit is tied to the HTML element’s font-size BTW.

So by using ems and rems in the text/box-shadow values your shadows can automatically adjust to font-size changes on the page.

I hope some of these tips are useful. Other users may disagree or have alternative/additional tips for implementing shadow.

Cheers,
Sebastian

P.S. in terms of reusing shadows, MT will support reusable presets in the not too distant future, but for now copying and pasting into the custom code editor (to the left of the Font group) might be best. In a few weeks custom code added to that editor will be interchangeable with the GUI fields. This will make copying and pasting styles in MT a bit easier.