<div>box-shadow</div>
<div>box-shadow</div>
<div>box-shadow</div>
<div>box-shadow</div>
<div>box-shadow</div>
<div>box-shadow</div>
div:nth-child(1) {
  text-align: center;
  width: 300px;
  margin: 30px auto;
  background-color: #dedede;
  box-shadow: 25px 15px 10px red;
}

div:nth-child(2) {
  text-align: center;
  width: 300px;
  margin: 80px auto;
  background-color: #dedede;
  box-shadow: red 5px 5px 5px, orange 10px 10px 5px, yellow 15px 15px 5px, blue 20px 20px 5px, navy 25px 25px 5px, violet 30px 30px 5px;
}

div:nth-child(3) {
  text-align: center;
  width: 300px;
  margin: 80px auto;
  padding: 20px 0;
  border-radius: 5px;
  box-shadow: inset #f8bbd0 3px 3px 6px 0px, inset #ffcdd2 -3px -3px 6px 1px;
}

div:nth-child(4) {
  text-align: center;
  width: 300px;
  margin: 80px auto;
  padding: 20px 0;
  border-radius: 5px;
  box-shadow: #bdbdbd 0px 30px 60px -12px inset, #f5f5f5 0px 18px 36px -30px inset;
}

div:nth-child(5) {
  text-align: center;
  width: 300px;
  margin: 80px auto;
  padding: 20px 0;
  box-shadow: inset -30px 20px 15px yellow, #ffab91 2px 2px 5px;
}

div:nth-child(6) {
  text-align: center;
  width: 300px;
  margin: 80px auto;
  padding: 20px 0;
  box-shadow: #43a047 0px 0px 5px 3px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.