<div class="el">Hover!</div>

.el {
  --box-shadow-blur: 3px;
  box-shadow: 0 3px var(--box-shadow-blur) #000;
  transition: --box-shadow-blur 0.45s;
}
.el:hover {
  --box-shadow-blur: 10px;
}

/* styles */
html {
  background: lightblue;
}
.el {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #111;
}

CSS.registerProperty({
  name: "--box-shadow-blur",
  syntax: "<length>",
  inherits: false,
  initialValue: "0px"
});