Neon effect in text and SVG with CSS

#css #webdev #html

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.

The logo without the 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.

Text without effect

Text with effect

I hope you find it useful!

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started