DEV Community

MiguelMJ
MiguelMJ

Posted on

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!

Top comments (2)

Collapse
 
mitya profile image
Dima

Thx for this tip!

Collapse
 
miguelmj profile image
MiguelMJ

😄❤️