Shadows

Shadows

Add depth with text-shadow and box-shadow!

text-shadow

horizontal vertical blur color:

h1 {
  text-shadow: 2px 2px 4px gray;
}

• horizontal offset, vertical offset, blur, color.
• Negative offsets push the shadow left/up.

box-shadow

Same idea for boxes, but MORE control:

div {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Order: offset-x offset-y blur spread color. Add inset for inner shadow:

div {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

spread controls how BIG the shadow is (positive expands).

Multiple shadows

Comma them together:

div {
  box-shadow: 0 2px 4px gray, 0 8px 16px rgba(0,0,0,0.2);
}

Great fake layers with just CSS!

Interesting CSS shadow anecdotes

Layer shadows (0 0 0 xpx) can draw rings / outlines around buttons.

TL;DR

• text-shadow: text depth.
• box-shadow: box depth, optional spread + inset.
• Order: offset-x offset-y blur spread color.
• Multiple shadows separated by commas.
• inset flips the shadow inside.