Get drop-shadow to spread further

Question

I want my logo to glow a bit. And for this I'm using -webkit-filter: drop-shadow(0 0 8px rgba(255, 3, 17, 0.8). The problem is that most browsers don't support the 4th value which is spread. So how can I get the drop-shadow bigger without having the spread value?

img {
    height: auto;
    width: 200px;
    margin-right: 2vw;
    animation: logo-glow 2s infinite alternate-reverse;
}

@keyframes logo-glow{
    0% {
        -webkit-filter: drop-shadow(0 0 15px rgba(255, 3, 17, 0.8));
    }
    100% {
        -webkit-filter: drop-shadow(0px 0px 1px rgba(64, 4, 0, 0.87));
    }
}

<img src="http://www.tdcdkhd.com/wp-content/uploads/2018/03/logo.png">

This is the image that I'm going to use on my webpage:

Answer 1

There's no direct alternative to the spread property, which isn't actually part of the standard. It may be possible to use SVG Filters as per CSS3 filter: drop-shadow spread property alternatives. Otherwise it may be possible to use one image on top of the other and use transforms to grow the background, but I'm not exactly sure if that's the effect you're going for.

@keyframes logo-grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

Then apply that to the background image. You'd need to make sure the two images match up exactly in terms of sizing or the overlap would look bad (like in the demo above).