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

@property --box-shadow-blur {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

.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;
}