Maybe I'm missing some detail, but the blur filter seems pointless. Both box-shadow and blur() are approximations of gaussian blurs.
If you apply two gaussian blurs, you're multiplying two gaussian functions in the frequency domain. The product of two gaussian functions is another gaussian function, so the same effect can be accomplished more efficiently with a single gaussian blur. You just need to tweak the shadow opacity and blur radius.
Clearly it’s an over-engineered solution, and there is no way the end result justifies the use of an expensive blur filter. However, just adjusting the radius and opacity would not produce the exact same effect, since the blur is not just blurring the shadow, but the whole <div>. This means that the background color (transparent) will mix with the shadow color. I’m guessing that’s not even intentional, because it’s a strange effect to seek out - a drop shadow that becomes lighter close to the object that is supposed to be blocking the light.
And even that effect should be possible to approximate with a regular box-shadow, by layering a white shadow on top of a transparent black.
That’s a good point. I didn’t think about the mixing of the interior background color. And yeah, I agree that that’s a weird property, and would guess that depending on how you configure the rest of the parameters, could lead to very strange results.
Actually, I was thinking about this as I went to sleep last night, and I think I was wrong about the opacity being a factor. The convolution kernels will be normalized, which means that their composition will also be normalized. That means that the only parameter to adjust is the radius.
As a side note, it’s kind of interesting that the first property “still a Gaussian blur” is easiest to see in the frequency domain as a product, while the second property “still integrates to 1” is easier to see when thinking in the spatial domain as a convolution.
And one last tidbit my brain wandered to: you might notice that the product of two Gaussian functions results in a new Gaussian narrower than the originals. Yet the blur radius in the spatial domain is obviously wider. This is because the Fourier transform of a wider Gaussian is a narrower Gaussian and vice versa, and that is a special case of the uncertainty principle.
If you apply two gaussian blurs, you're multiplying two gaussian functions in the frequency domain. The product of two gaussian functions is another gaussian function, so the same effect can be accomplished more efficiently with a single gaussian blur. You just need to tweak the shadow opacity and blur radius.