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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!