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
screenblend 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.
