<div class="content">
  <div class="buttons">
  <button class="button" onclick="noneO()">none</button> 
  <button class="button" onclick="threeValues()">2px 2px red</button>  
  <button class="button" onclick="fourValues()">2px 2px 4px red</button> 
    <button class="button" onclick="negativeValues()">-2px -2px red</button> 
    <button class="button" onclick="multipleValues()">multiple shadows</button>
  </div>

<div id="text" style="font-size: 35px;">CSS text-shadow Property</div>
  
  <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
</div>

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;
}

.buttons {
  left:-50%;
  position: absolute;
  top:0;
  z-index:1;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 150px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

.col {
  position: absolute;
  font-weight: bold;
  font-size:15px;
  width: 100%;
  left:0;
  top:100px;
}

#text {
  font-family: arial;
}

function noneO() {
 document.getElementById("text").style.textShadow="none" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "text-shadow: none;") {
    x.innerHTML = "text-shadow: none;";
  } else {
    x.innerHTML = "text-shadow: none;";
  }
}

function threeValues() {
 document.getElementById("text").style.textShadow="2px 2px red" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "text-shadow: 2px 2px red;") {
    x.innerHTML = "text-shadow: 2px 2px red;";
  } else {
    x.innerHTML = "text-shadow: 2px 2px red;";
  }
}

function fourValues() {
 document.getElementById("text").style.textShadow="2px 2px 4px red" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "text-shadow: 2px 2px 4px red;") {
    x.innerHTML = "text-shadow: 2px 2px 4px red;";
  } else {
    x.innerHTML = "text-shadow: 2px 2px 4px red;";
  }
}

function negativeValues() {
 document.getElementById("text").style.textShadow="-2px -2px red" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "text-shadow: -2px -2px red;") {
    x.innerHTML = "text-shadow: -2px -2px red;";
  } else {
    x.innerHTML = "text-shadow: -2px -2px red;";
  }
}

function multipleValues() {
 document.getElementById("text").style.textShadow="1px 1px #e9d8a6, 2px 2px #e9d8a6, 3px 3px #e9d8a6, 4px 4px #e9d8a6, 5px 5px #e9d8a6, 6px 6px #e9d8a6, 7px 7px #e9d8a6, 8px 8px #e9d8a6, 9px 9px #e9d8a6, 10px 10px #e9d8a6, 11px 11px #e9d8a6, 12px 12px #e9d8a6, 13px 13px #e9d8a6, 14px 14px #e9d8a6, 15px 15px #e9d8a6" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "text-shadow: 1px 1px #e9d8a6, 2px 2px #e9d8a6, 3px 3px #e9d8a6, 4px 4px #e9d8a6, 5px 5px #e9d8a6, 6px 6px #e9d8a6, 7px 7px #e9d8a6, 8px 8px #e9d8a6, 9px 9px #e9d8a6, 10px 10px #e9d8a6, 11px 11px #e9d8a6, 12px 12px #e9d8a6, 13px 13px #e9d8a6, 14px 14px #e9d8a6, 15px 15px #e9d8a6;") {
    x.innerHTML = "text-shadow: 1px 1px #e9d8a6, 2px 2px #e9d8a6, 3px 3px #e9d8a6, 4px 4px #e9d8a6, 5px 5px #e9d8a6, 6px 6px #e9d8a6, 7px 7px #e9d8a6, 8px 8px #e9d8a6, 9px 9px #e9d8a6, 10px 10px #e9d8a6, 11px 11px #e9d8a6, 12px 12px #e9d8a6, 13px 13px #e9d8a6, 14px 14px #e9d8a6, 15px 15px #e9d8a6;";
  } else {
    x.innerHTML = "text-shadow: 1px 1px #e9d8a6, 2px 2px #e9d8a6, 3px 3px #e9d8a6, 4px 4px #e9d8a6, 5px 5px #e9d8a6, 6px 6px #e9d8a6, 7px 7px #e9d8a6, 8px 8px #e9d8a6, 9px 9px #e9d8a6, 10px 10px #e9d8a6, 11px 11px #e9d8a6, 12px 12px #e9d8a6, 13px 13px #e9d8a6, 14px 14px #e9d8a6, 15px 15px #e9d8a6;";
  }
}