Image Illustration Filter

I like that sorta effect where an image almost looks like it’s an oil painting or an illustration made with a thick, runny ink fountain pen. I got the idea when Scott Vandehey shared his “halftone filter” effect on the Cloud Four blog.

I’d say it looks a lot like newspaper print:

The trick? We have an image chock-full of CSS filter effects and an underlying repeating radial gradient set to a super small background-size to get a dot-like effect that’s enhanced with mix-blend-mode.

The whole idea of Scott’s post is to demonstrate the power of CSS Blend Modes. So, I took the filter effects he had on the image:

…and made a few tweaks, namely:

• increasing the blur()a smidge (4px)
• bumping the contrast() by an ungodly amount (3000%)
• using screen blend mode

Here’s how that shakes out in CSS:

You might need to adjust that ginormous contrast() value depending on the image — something large enough to wash things out.