<div class="text">box-shadow size: </div>

.text {
  box-shadow: 0 0 max(45px, 15vw) rgba(0, 0, 0, .5);
}

/* Helpers*/
BODY {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font: calc(14px + 1vw)/1 Trebouchet MS, Arial, sans-serif;
}

DIV {
  width: clamp(230px, 50%, 360px);
  padding: 1em;
  text-align: center;
}

DIV::after {
  content: attr(data-size)
}

const elements = document.querySelectorAll('DIV');

const showWidth = () => {
  elements.forEach(element => {
    const style = window.getComputedStyle(element, null);
    const shadowSize = style.boxShadow.split('px')[2];
    element.dataset.size = `${shadowSize}px`;
  })
}

showWidth();

window.addEventListener('resize', showWidth);