Edit in JSFiddle

Result
CSS
HTML

div {
  height: 50px;
  width: 300px;
  border: 1px solid black;
  padding: 10px;
  margin : 30px; 
  float: left;
}

.ex1 {
  box-shadow: 5px 10px #888888;
}

.ex2 {
  box-shadow: 5px 10px 5px red;
}

.ex3 {
  box-shadow: 5px 10px 5px 10px rgba(30,30,30, 0.4);
}

.ex4 {
  box-shadow: 5px 10px 5px red inset;
}

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <div class="ex1">box-shadow: 5px 10px #888888;</div>
    <div class="ex2">box-shadow: 5px 10px 5px red;</div>
    <div class="ex3">box-shadow: 5px 10px 5px 10px rgba(30,30,30, 0.4);</div>
    <div class="ex4">box-shadow: 5px 10px 5px red inset;</div>
  </body>
</html>