How to fake 3D and more with CSS3 box-shadow

CSS3 box-shadow fake 3D

Box-shadow is a powerful property in CSS3. It’s more than just for drop-shadows. Think of it as a multi-purpose 3D styling tool. That’s because you can stack multiple drop shadows.

Today I’m going to show you how to make, out of a simple DIV, this:

CSS 3D button effect

Box-shadow takes 6 attributes:

  1. X offset
  2. Y offset
  3. Blur size
  4. Grow/Shrink size (optional)
  5. Color
  6. The “inset” flag (optional)

Here are some basic uses of a single box-shadow declaration:

.dropshadow {
    box-shadow: 0px 5px 10px #444;
Drop shadow

.fatshadow {
    box-shadow: 0px 5px 10px 5px #444;
Fat shadow

.insetshadow {
    box-shadow: 0px 5px 10px #444 inset;
Inset shadow

Interesting stuff is possible, for instance, by using no blur, and a semi-transparent white color:

.highlight {
	box-shadow: 0px 1em 0px rgba(255,255,255,0.5) inset;

Or, more simply, by using a grow factor on an inset white shadow, without any X or Y offset, we effectively add an inner border.

.innerborder {
	box-shadow: 0px 0px 0px 4px white inset;
Inner border

All of that is fine and dandy, but gets much more interesting when you use multiple box-shadows. You simply separate the declarations with a comma. Each new declaration is painted under the preceding one.

.theworks {
gray inset shadow all around, 
stronger on the bottom 
      0px   -1px    2px         gray inset,
...on top of an inner white band 
      0px    0px    0px    3px  white inset,
dark inset shadow under the white band,
stronger on the top (by offsetting it 1
pixel down. 
      0px    1px    5px    2px  black inset,
highlight, using semi-transparent white, 
without a blur 
      0px   15px    0px    3px  rgba(255,255,255,0.5) inset,
Under the highlight, darken the bottom 
of the div, with lots of blur 
      0px   -8px   15px    0px  black inset,
Done with insets, now on to the outer layers 
A white highlight below the div... 
      0px    2px    4px    2px  white,
...and a dark recess above. 
      0px   -2px    4px    2px  darkgray,
All of it on top of a fat gray outline 
      0px    0px    0px   10px  lightgray,
And now some fun. Let's add a lighter 
clone to the right, a darker one to the
left, and stack those lower and lower, 
and wider and wider. 3D button! 
      1px    1px    0px   11px  silver,
     -1px    1px    0px   11px  darkgray,
      1px    4px    0px   12px  silver,
     -1px    4px    0px   12px  darkgray,
      1px    7px    0px   13px  silver,
     -1px    7px    0px   13px  darkgray,
      1px   10px    0px   14px  silver,
     -1px   10px    0px   14px  darkgray,
      1px   13px    0px   15px  silver,
     -1px   13px    0px   15px  darkgray,
      1px   16px    0px   16px  silver,
     -1px   16px    0px   16px  darkgray, 
Finally, let's stack three bona-fide
drop-shadows, each lighter, each offset
      0px   16px    4px   17px  black,
     -4px   20px    8px   17px  gray,
    -12px   30px   16px   17px  silver
the works!

Comments are closed.