MiguelMJ
Posted on September 13, 2020
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 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!
Posted on September 13, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.