Create a Silkscreen Effect For Web Images With CSS3

Creating the visual effect of silkscreening - forming an image out of tiny dots of color - is easy to achieve in a web page with CSS3. The technique shown here uses multiple backgrounds in a div element: one repeating radial gradient that is closely related to the polka-dot effect in my Pop-Art CSS3 Effects Article, just at a smaller cell size, combined with a greyscale filter to desaturate the colors in the image.

I’ve also placed a full-size version of the same image (supplied by P Lam Khun) in the background of the <div>, set to a width of 100% to create a fluid, responsive design. I’ve also added a transition effect.

The Markup

The markup includes an inline SVG filter for Firefox. The <div> is empty, but will be propped open by using padding-bottom, in a method similar to that used to make YouTube videos responsive:

<div id="silkscreen"></div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 

<filter id="greyscale">

<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0

0.3333 0.3333 0.3333 0 0

0.3333 0.3333 0.3333 0 0

0      0      0      1 0"/>

</filter>

</svg>

The CSS

The stylesheet sets multiple background images in the <div> to layer and repeat, while applying filter effects:

div#silkscreen {

background: radial-gradient(rgba(0,0,0,0) 45%,

rgba(0,0,0,0.4) 46%),

radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),

url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lotus.jpg);

padding-bottom: 60%;

max-width: 800px; width: 80%;

margin: 0 auto;

background-position: 0 0, 2px 2px;

background-size:4px 4px, 4px 4px, 100% 100%;

background-repeat: repeat, repeat, no-repeat;

-webkit-filter: grayscale(1);

filter: url(#greyscale);

filter: grayscale(1);

transition: 1.3s

}

div#silkscreen:hover {

-webkit-filter: grayscale(0); filter: none; 

}

For more details on the SVG filter, read my article on converting an image to black and white. Check out the code for this effect on CodePen