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:

img {
  /* ... */
  filter:
    grayscale(1) 
    brightness(80%) 
    contrast(150%) 
    blur(2px);
  mix-blend-mode: $blend-mode;
}

…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:

.painted {
  background: repeating-radial-gradient(
    circle at center,
    hsl(0 0% 15%),
    hsl(16.1 5% 55.5%);
  );
  background-size: 5px;
}

.painted img {
  filter: blur(4px) contrast(3000%) grayscale(1);
  mix-blend-mode: screen;
  width: 100%;
}

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