<style>
  form { {{ inlineStyle }} }
</style>

<form @change="copyText = 'Copy'">
  <label for="inset">
    <input id="inset" type="checkbox" v-model="inset">
    &nbsp;Inset ?
  </label>

  <label for="offsetX">Offset X</label>
  <input id="offsetX" min="0" max="100" type="range" v-model="x">

  <label for="offsetY">Offset Y</label>
  <input id="offsetY" min="0" max="100" type="range" v-model="y">

  <label for="blur">Blur</label>
  <input id="blur" type="range" v-model="blur">

  <label for="spread">Spread</label>
  <input id="spread" type="range" v-model="spread">

  <label for="color">Color</label>
  <input id="color" type="text" v-model="color">

  <h2 class="result">
    <span v-if="inset">inset</span>
    <span>{{ x }}px</span>
    <span>{{ y }}px</span>
    <span v-if="blur !== 0">{{ blur }}px</span>
    <span v-if="spread !== 0">{{ spread }}px</span>
    <span v-if="color">{{ color }}</span>
  </h2>

  <button @click.prevent="copyToClipboard()">{{ copyText }}</button>
</form>
body {
  font-family: sans-serif;
}
form {
  display: flex;
  flex-flow: column;
  max-width: 25rem;
  padding: 2rem;
  margin:  2rem auto;
  border-radius: 1rem;
}
label {
  margin-top: 1rem;
}
.result {
  margin: 2rem auto;
  display: inline-block;
}
PetiteVue.createApp({
  inset: false,
  x: 5,
  y: 5,
  blur: 25,
  spread: 0,
  color: "#00000055",
  copyText: "Copy",

  get inlineStyle (){
    return `
    box-shadow: ${ this.inset ? 'inset' : '' } ${ this.x }px ${ this.y }px ${ this.blur }px ${ this.spread }px ${ this.color };
    `;
  },

  copyToClipboard() {
    const el = document.createElement('textarea');
    el.value = this.inlineStyle.trim();
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);
    this.copyText = "copied";
  }
}).mount()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/petite-vue