Use Chained CSS Filter to Apply Visual Effects
Chaining CSS filters gives us the opportunity to create appealing visual effects. In this example, we look at creating a "neon" like effect for SVG.
Instructor: [0:00] What if the SVG had a kind of neon effect? To do this we can use the CSS filter property. Let's apply a drop-shadow filter with the horizontal offset of , a vertical offset of , a blur-radius of 1vmin and then for the color, we're going to use the stroke value. Our SVG kind of look like they're giving off light.
[0:19] A drop-shadow applies this shadow around the shape of an element as opposed to a box-shadow, which would apply a shadow to the box model of an element.
[0:27] We can also change filters, so let's apply a brightness filter and let's apply a brightness of 1.2 and that brightens our SVG up, and it almost gives an effect like they're lit up.
[0:37] In review, we can use CSS filter to apply visual effects to an element. Here we're trying to make it look like our SVG are giving off light, so we use a drop-shadow to apply a shadow around the shape of our element and then we use the brightness filter to brighten the elements.