Creating a Liquid Switch with CSS 

Thanks!

I learnt this from @anatudor (m.ru-vid.com) and Temani Afif. In my case, it was more of trial and error based on what they'd done before.

Thank you! 😊

I don't know the technical explanation for this, so I may describe it incorrectly (my apologies in advance). The idea is that the contrast filter sharpens the edges of two colors by shifting the colors, but when there is no color (when there's a full transparency), there's nothing to sharpen and leaves the blurred area blurred. By adding the box-shadow, we are surrounding the element with a color instead of with transparency, so the filter can do its magic.

@@alvaromontoro it's a great explanation. Thanks!