There is no official spec for changing only the color of the box shadow. There is though a simple way to simulate this behavior. Based on the w3 spec, if not explicitly set, the box-shadow property will take the color value, meaning you can do something like this:
.box-shadow {
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px;
color: #000;
}
.box-shadow:hover {
color: #ff0000;
}
Here is a demo of the example - box-shadow hover.
Another way of doing this is to use CSS Variables. Your code will look something like that:
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
Keep in mind that currently the support for CSS variables is really poor.