skip navigation

Shadows

Tagged in: design

Box Shadows

The box-shadow property has several different values:

box-shadow: 5px 10px;. The first two define the offset: the first to the R the second is down. NB. Negative values can be used to shift the shadow to the L and up.

box-shadow: 5px 10px 10px;. The third figure adds blur.

box-shadow: 5px 10px 10px 20px. The fourth number is for spread. Note the shadow does not push other elements around.

box-shadow: 5px 10px 10px 8px #0f0

box-shadow: 5px 10px 10px 10px inset;. Add an internal shadow with inset

box-shadow: 8px 14px blue, -10px -15px red, 15px -10px green. Multiple shadows layered in the order listed. This could have other uses.

box-shadow: 8px 14px 12px blue, -10px -15px 12px red, 15px -10px 12px green;. As above with a 12px blur.

Text Shadows

The property text-shadow works much the same as box-shadow although spread and inset are not supported.

The values are then:

  1. horizontal offset
  2. vertical offset
  3. blur
  4. color
  5. You can also use the word none for no shadow.

The point of having both box-shadow and text-shadow is that any element is typically both a box and text. So you choose the property depending on where you want the shadow applied.

Cool Shadows

View the CSS for this page 

.box {
    height: 90px;
    width: 170px;
    background: tomato;
    margin-top: 120px;
}
.box1 {
  box-shadow: 5px 10px;
}
.box2 {
  box-shadow: 5px 10px 10px;
}
.box3 {
  box-shadow: 5px 10px 10px 20px;
}
.box4 {
  box-shadow: 5px 10px 10px 8px #0f0;
}
.box5 {
  box-shadow: 5px 10px 10px 10px inset;
}
.box6 {
  box-shadow: 8px 14px blue, -10px -15px red, 15px -10px green;
}
.box7 {
  box-shadow: 8px 14px 12px blue, -10px -15px 12px red, 15px -10px 12px green;
}
.box8 {
  box-shadow: 8px 14px blue, -10px -15px red, 15px -10px white;
}

h1 {
  font-size: 5.5em;
  animation: mainTitle 17s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

h2 /*:nth-of-type(2) */ {
  text-shadow: 2px 3px #000;
}
.resources ul {
  box-shadow: -5px 12px 9px -5px #555;
}

.multishadow>h2 {
  font-size: 5em;
  text-shadow: 
    2px 2px #fff,
    3px 3px tomato,
    6px 6px #fff,
    7px 7px tomato,
    10px 10px #fff,
    11px 11px tomato,
    14px 14px #fff,
    15px 15px tomato;
}

@keyframes mainTitle {
  0% {
    text-shadow: 0px 0px transparent;
  }
  30% {
    text-shadow: 10px 10px 10px #000;
  }
  60% {
    text-shadow: 10px 10px 10px #00f;
  }
  80% {
    text-shadow: -30px -25px 20px #0f0;
  }
  90% {
    text-shadow: 30px 25px 20px transparent;
  }
  100% {
    text-shadow: 0px 0px transparent;
  }
}
☝