<header>
  <h2 class="title">element.style.boxShadow</h2>
  <p class="description">Задає тінь для рамки елемента.</p>
</header>
<main>
  <div class="result">
    <button id="shadowButton">Hover over me</button>
    <div>
      <label for="hOffset">Horizontal Offset:</label>
      <input type="number" id="hOffset" value="10">
    </div>
    <div>
      <label for="vOffset">Vertical Offset:</label>
      <input type="number" id="vOffset" value="10">
    </div>
    <div>
      <label for="blurRadius">Blur Radius:</label>
      <input type="number" id="blurRadius" value="5">
    </div>
    <div>
      <label for="spreadRadius">Spread Radius:</label>
      <input type="number" id="spreadRadius" value="0">
    </div>
    <div>
      <label for="shadowColor">Shadow Color:</label>
      <input type="color" id="shadowColor" value="#000000">
    </div>
    <button id="applyShadow">Apply Shadow</button>
  </div>
</main>
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
#shadowButton {
  margin-bottom: 15px;
  padding: 10px 20px;
  font-size: 16px;
}
document.getElementById('applyShadow').addEventListener('click', function() {
  const hOffset = document.getElementById('hOffset').value;
  const vOffset = document.getElementById('vOffset').value;
  const blurRadius = document.getElementById('blurRadius').value;
  const spreadRadius = document.getElementById('spreadRadius').value;
  const shadowColor = document.getElementById('shadowColor').value;

  const shadowValue = `${hOffset}px ${vOffset}px ${blurRadius}px ${spreadRadius}px ${shadowColor}`;
  document.getElementById('shadowButton').style.boxShadow = shadowValue;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.