<h4>
Emulating "box-shadow-color" CSS property using CSS Custom Properties
</h4>

<strong class="test">
hover me
</strong>

<p><a href="https://blog.gospodarets.com/css_properties_in_depth">CSS custom properties In-Depth</a> article</p>
<p">Made by <a href="https://twitter.com/malyw">@malyw</a></p>

.test {
  --box-shadow-color: yellow;
  box-shadow: 0 0 30px var(--box-shadow-color);
}

.test:hover {
  --box-shadow-color: orange;
}

/* COMMON */
body{
  background-color: #282C34;
  color: #E5C07B;
  overflow: hidden;
}

.test{
  transition: box-shadow 0.3s;
  margin: 10px;
  border-radius: 10px;
  padding: 5px;
  display: block;
}

p{
  font-size: 20px;
  margin-top: 20px;
}