loading...

Neon effect in text and SVG with CSS

miguelmj profile image MiguelMJ ・1 min read

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);
}

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!

Posted on by:

miguelmj profile

MiguelMJ

@miguelmj

I'm a Computer Science student and programming is my passion. I love learning as much as I love teaching, sharing knowledge is a high human value!

Discussion

markdown guide