#circle {
  height: 100px;
  width: 100px;
  background-color: blue;
  border-radius: 50%;
  box-shadow: 10px 10px 15px green;
}

#square {
  height: 100px;
  width: 100px;
  background-color: red;
  box-shadow: 10px 10px 15px yellow;
}

#diamond {
  height: 100px;
  width: 100px;
  background-color: green;
  transform: rotate(45deg);
  margin-left: 15px;
  box-shadow: 10px 10px 15px;
}


#img {
  height: 100px;
  width: 100px;
  background-image:
  url("https://upload.wikimedia.org/wikipedia/commons/c/c3/Chess_board_opening_staunton.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

#gradient1 {
  height: 100px;
  width: 100px;
  background-color: red;
  background-image: linear-gradient(to left, red, green, blue);
}

#gradient2 {
  height: 100px;
  width: 100px;
  background-color: red;
  background-image: radial-gradient(red, yellow, blue);
}

#gradient3 {
  height: 100px;
  width: 100px;
  background-color: red;
  background-image: linear-gradient(to left, red, green, blue);
  transform: skewX(60deg);
  margin-left: 40px; 
}