Neon effect in text and SVG with CSS

miguelmj

MiguelMJ

Posted on September 13, 2020

Neon effect in text and SVG with CSS

I'm currently working in a website for my portfolio and when I found a colour palette I was comfortable with, I bumped into a serious problem: the logo of one project blended with the background.

One approach to solve a problem like this is to add contour to highlight the image. Trying it out, I ended up with a really cool neon-like effect.

without effect
The logo without the effect

with effect
The logo with the effect

The CSS property used for this is the filter drop-shadow:



img{
    filter: drop-shadow(0px 0px 3px #116466);
}


Enter fullscreen mode Exit fullscreen mode

Where the parameters are (x-off y-off blur color). Find more information here.
Note that the image must have SVG format. There are other ways to obtain a similar effect with a SVG image, but the advantage that this method have is that it will work even in external images, not only inline SVG.

Also, this works on text too! Here's an example.
Alt Text
Text without effect
Alt Text
Text with effect

I hope you find it useful!

💖 💪 🙅 🚩
miguelmj
MiguelMJ

Posted on September 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related