Using box-shadow inset

Posted on: April 25th, 2014

Box-shadow is one of the biggest things clients ask for because it makes the design “pop” or “come off the page.” That being said, it can be highly overused and when it is you get a big shadowy mess. A little known bit of CSS with box-shadow is being able to apply multiple box shadows and also being able to apply inset box shadows.

Take a look at this example:

See the Pen ADT Navigation by John Hartley (@johnbhartley) on CodePen.

In the example you can see that we have a nice 3Dish button set. This navigation was ganked from the ADT website once you sign into your account (why I still have ADT is a whole other story). It’s a great example because there are also gradients and border radii and so on, but for now we’ll just look at the box-shadow.

The important bits:

.links a {
  border: 1px solid #0e3b6e;
  border-right: 0;
  height: 33px;
  line-height: 33px;
  display: block;
  float: left;
  padding: 0 15px;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,0 1px 0 rgba(255,255,255,0.3);
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,0 1px 0 rgba(255,255,255,0.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,0 1px 0 rgba(255,255,255,0.3);
  background: #2582cd;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #74abcf), color-stop(100%, #2582cd));
  background-image: -webkit-linear-gradient(#74abcf,#2582cd);
  background-image: -moz-linear-gradient(#74abcf,#2582cd);
  background-image: -o-linear-gradient(#74abcf,#2582cd);
  background-image: linear-gradient(#74abcf,#2582cd);
}

The important important bits:

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

Let’s break this down a bit more. The first part

0 1px 0 rgba(255,255,255,0.5) inset,

sets us 1px from the top, color is set to white with .5 opacity (according to rgba()) and the shadow itself is inset. Because the third value, which handles the amount of blur is 0, the shadow basically becomes a line with no blur and no bleed. In this case box-shadow inset is giving us a second border, but only on the top of our link. Pretty cool.

The second part, separated by a comma:

0 1px 0 rgba(255,255,255,0.3);

Same thing basically, but because it’s not inset, the offset will be 1px down from the bottom of the element. Blur again set to 0 and rgba() set to white with opacity of .3.

To close all of the buttons in and allow for that bumped out look, there is a blue border. Play with it a bit inside the CodePen to see how it changes the look.

While that’s a quick example, it highlights how to use both inset box shadows and multiple box-shadows. With multiple box-shadow you could create a long shadow:

/* broken out for easier reading */
box-shadow: 
1px 1px 0 0.2px rgba(42, 59, 77, 0.98),
2px 2px 0 0.4px rgba(42, 59, 77, 0.96),
3px 3px 0 0.6px rgba(42, 59, 77, 0.94),
4px 4px 0 0.8px rgba(42, 59, 77, 0.92),
5px 5px 0 1px rgba(42, 59, 77, 0.9),
6px 6px 0 1.2px rgba(42, 59, 77, 0.88),
7px 7px 0 1.4px rgba(42, 59, 77, 0.86),
8px 8px 0 1.6px rgba(42, 59, 77, 0.84),
9px 9px 0 1.8px rgba(42, 59, 77, 0.82),
10px 10px 0 2px rgba(42, 59, 77, 0.8),
11px 11px 0 2.2px rgba(42, 59, 77, 0.78),
12px 12px 0 2.4px rgba(42, 59, 77, 0.76),
13px 13px 0 2.6px rgba(42, 59, 77, 0.74),
14px 14px 0 2.8px rgba(42, 59, 77, 0.72),
15px 15px 0 3px rgba(42, 59, 77, 0.7),
16px 16px 0 3.2px rgba(42, 59, 77, 0.68), /* pretty intense */
17px 17px 0 3.4px rgba(42, 59, 77, 0.66),
18px 18px 0 3.6px rgba(42, 59, 77, 0.64),
19px 19px 0 3.8px rgba(42, 59, 77, 0.62),
20px 20px 0 4px rgba(42, 59, 77, 0.6),
21px 21px 0 4.2px rgba(42, 59, 77, 0.58),
22px 22px 0 4.4px rgba(42, 59, 77, 0.56),
23px 23px 0 4.6px rgba(42, 59, 77, 0.54),
24px 24px 0 4.8px rgba(42, 59, 77, 0.52),
25px 25px 0 5px rgba(42, 59, 77, 0.5),
26px 26px 0 5.2px rgba(42, 59, 77, 0.48),
27px 27px 0 5.4px rgba(42, 59, 77, 0.46), /* can you imagine writing this by hand? */
28px 28px 0 5.6px rgba(42, 59, 77, 0.44),
29px 29px 0 5.8px rgba(42, 59, 77, 0.42),
30px 30px 0 6px rgba(42, 59, 77, 0.4),
31px 31px 0 6.2px rgba(42, 59, 77, 0.38),
32px 32px 0 6.4px rgba(42, 59, 77, 0.36),
33px 33px 0 6.6px rgba(42, 59, 77, 0.34),
34px 34px 0 6.8px rgba(42, 59, 77, 0.32),
35px 35px 0 7px rgba(42, 59, 77, 0.3),
36px 36px 0 7.2px rgba(42, 59, 77, 0.28),
37px 37px 0 7.4px rgba(42, 59, 77, 0.26),
38px 38px 0 7.6px rgba(42, 59, 77, 0.24),
39px 39px 0 7.8px rgba(42, 59, 77, 0.22),
40px 40px 0 8px rgba(42, 59, 77, 0.2),
41px 41px 0 8.2px rgba(42, 59, 77, 0.18),
42px 42px 0 8.4px rgba(42, 59, 77, 0.16),
43px 43px 0 8.6px rgba(42, 59, 77, 0.14), /* thank goodness for generators */
44px 44px 0 8.8px rgba(42, 59, 77, 0.12),
45px 45px 0 9px rgba(42, 59, 77, 0.1),
46px 46px 0 9.2px rgba(42, 59, 77, 0.08),
47px 47px 0 9.4px rgba(42, 59, 77, 0.06),
48px 48px 0 9.6px rgba(42, 59, 77, 0.04),
50px 50px 0 rgba(42, 59, 77, 0);

As far as I can tell there’s no negative effect of rearranging the order of box-shadow, but maybe I’m just lucky to not see any ill effects yet.

For more information on box-shadow, hit up the Mozilla Developer Network.

Note: Cross-browser box-shadow is well supported, but not available at all in IE8 or less. If worried about legacy Chrome, Safari or Firefox you can use -webkit-, -webkit-, or -mox- prefixes respectively (according to caniuse.com).

Note note: Don’t let the shadow people know that you’re insetting or they’ll get you

previous post: Desktop Background #3 next post: Your First WordPress.org Plugin – Part 1: Submitting and Clicking Send