<div class="sandbox">
  <div class="options">
    <pre>
.element {
  box-shadow:&nbsp;<select class="top">
        <option value="-25px">-25px</option>
        <option value="-10px">-10px</option>
        <option value="0">0</option>
        <option value="10px" selected>10px</option>
        <option value="25px">25px</option>
      </select> <select class="left">
        <option value="-25px">-25px</option>
        <option value="-10px">-10px</option>
        <option value="0">0</option>
        <option value="10px" selected>10px</option>
        <option value="25px">25px</option>
      </select>;
}
</pre>
  </div>

  <div class="content">
    <div class="element no1">1</div>
  </div>

</div>

.element {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(20px, 5vmin, 40px);
  background-color: var(--green);
  width: 30vmin;
  height: 30vmin;
  min-width: 15vmin;
  min-height: 15vmin;
  padding: 0;
  margin: 0;
  box-shadow: 10px 10px;
}

@media (min-width: 690px) {
  .element {
    min-width: 200px;
    min-height: 200px;
  }
  
  .interactive-demo .content {
    flex: 0 0 auto;
    padding-right: 25px;
  }
}
View Compiled 
const selectList = document.querySelectorAll('select');
const t = document.querySelector('.top');
const l = document.querySelector('.left');
const content = document.querySelector('.content');
const element = document.querySelector('.element');

selectList.forEach(select => select.addEventListener('change', () => {
  element.style.boxShadow = `${t.value} ${l.value}`;
}))
View Compiled

External CSS

  1. https://tim-montmorency.com/timdoc/shared/styles/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.